javascript - 尝试使用 AngularJS + $http.get 访问 Instagram API

标签 javascript http angularjs instagram

谁能指出其中的错误吗?我对这一切基本上都是新手,我刚刚使用 angularJS 教程、API 和其他一些资源来尝试将所有这些拼凑在一起,但运气不佳。忽略关于主题标签的部分,它还没有做任何事情。代码应该做的是响应第一个输入标签中的输入。在那里输入的任何内容 (nameQuery) 都会连接到用于访问 API 的字符串中,然后我获取该信息并将其存储在 $scope.userID 中,然后使用 userID 来获取 userData 和图像列表,以便我可以打印它们。但它不起作用,我已经研究了一段时间,但没有任何线索。希望更有经验的程序员能够帮助我!

HTML 文件:

<!doctype html>
<html ng-app>

    <head>
        <meta charset="utf-8" />
        <title>Insta-Visualizer</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
         <script src="script.js"></script>

    </head>

    <body ng-controller="ImageCtrl">

        <div id="wrapper">

            <div id="header">
            <span class="title">Instagram Visualizer</span>
            </div>

            <div id="body">

                <div class="border">

                    <div id="search1">
                        Username <input ng-model="nameQuery">
                    </div>

                    <div id="search2">
                        Hashtag <input ng-model="hashtagQuery">
                    </div>

                </div>

                <div class="border">
                    <ul class="images">
                        <li ng-repeat="picData in imageList">
                            <img ng-src="{{picData.images.low_resolution}}"/>
                        </li>
                    </ul>
                </div>

            </div>

        </div>
    </body>
</html>

脚本:

var token = '1502600.bcf60cd.2ddf423a61534720beafdae05c4cf26f';

function ImageCtrl($scope, $http){

    var searchURL = 'https://api.instagram.com/v1/users/search?q=' + nameQuery
               + '&access_token=' + token;

    $http.get(searchURL).success(function(data) {
        $scope.userID = data.data.id;
    });

    var userDataURL = 'https://api.instagram.com/v1/users/' + $scope.userID
                      + '/media/recent/?access_token=' + token;

    $http.get(userDataURL).success(function(data) {
        $scope.userData = data;
        $scope.imageList = $scope.userData.data;
    });            

};

最佳答案

明显的错误:

  1. nameQuery 未绑定(bind)到 $scope
  2. 您提出了两项​​请求,但没有提供所需的全部信息。
  3. 您正在执行跨域请求,但未使用 jsonp 方法。

您阅读过有关 consuming REST services in AngularJS 的教程吗? ?

关于javascript - 尝试使用 AngularJS + $http.get 访问 Instagram API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17537406/

相关文章:

java - 运行 CGI Java 程序

javascript - 关于“AngularJS 与 Plupload 一起使用”的一些问题

rest - 如何使用 AngularJs 和 jersey 编写 REST 应用程序

javascript - 禁用/启用 jQuery Mobile 输入的常见方法是?

html - 浏览器未在 HTTPS 中缓存图像(HTTP 工作正常)。即使使用缓存控制 : public

java - 如何从serversocket的accept方法中退出?

javascript - 当没有使用 angular-file-upload 指令上传文件时?

javascript - 隐藏在面板后面的下拉菜单

javascript - 从 HTML 表单中获取值

javascript - select2 MULTIPLE 占位符不起作用