AngularJS 控制器无法将 Youtube API 响应结果存储到变量中答案

【问题标题】：AngularJS controller cannot store Youtube API response results to a variableAngularJS 控制器无法将 Youtube API 响应结果存储到变量中
【发布时间】：2016-08-25 18:45:18
【问题描述】：

我正在尝试使用 youtube 的 API 发出搜索请求，并将结果存储到 AngularJS 控制器内的变量中。

这是我的 app.js 文件。

var app = angular.module('myApp', []);

app.controller('myController', ['$scope', function($scope){

    this.data = '###';

    this.search = function(){
        var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q: 'beatles'
        });

        request.execute(function(response){
            var responseString = JSON.stringify(response, '', 2);
            this.data = responseString;
            // document.getElementById('response').innerHTML += this.data;
        });
    }

}]);

function onClientLoad() {
    gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}

function onYouTubeApiLoad() {
    gapi.client.setApiKey('blahblahblahblahblahblah');
}

这是 index.html。

<!DOCTYPE html>

<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body ng-controller="myController as c">
    <div ng-click="c.search()" class="btn btn-success">
        Press me!
    </div>
    <h2>Result</h2>
    <pre id="response"> {{c.data}} </pre>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>
</html>

在 html 代码中，有一个 press me 按钮调用发出请求的 search() 函数。 javascript控制台显示请求执行成功。

我将响应结果存储到名为data 的变量中。问题是变量的内容没有改变。但是，如果我将此值存储在文档元素的 .innerHTML 中（经典的 Javascript 方式），则此方法有效，并且结果显示成功（此行当前已注释掉）。

为什么响应结果不能存储在这个函数之外的变量中？

【问题讨论】：

标签： javascript angularjs youtube-api

【解决方案1】：

最后，问题的解决方案是上面两个答案的组合：

var app = angular.module('myApp', []);

app.controller('myController', ['$scope', '$q', function($scope, $q){

    var c = this;

    c.search = function(){
        var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q: 'beatles'
        });

        request.execute(function(response){
            var responseString = JSON.stringify(response, '', 2);
            c.data = responseString;
            $scope.$digest();
        });

    };

}]);

我们首先需要将控制器本身设置为一个变量

var c = this;

然后我们还需要调用$scope.$digest() 来更新c.data 的值。现在在按下按钮的同时，结果就会显示在页面中。

【讨论】：

【解决方案2】：

我假设gapi.client 不是角度库。搜索请求在 angularjs 之外结束，因此 angular 不会用新的响应更新范围。您必须在request.execute 的回调中调用摘要循环。像下面这样的东西应该可以工作：

request.execute(function(response){
        var responseString = JSON.stringify(response, '', 2);
        this.data = responseString;
        $scope.$digest();
    });

我希望这会有所帮助。

【讨论】：

【解决方案3】：

请这样尝试。

app.controller('myController', ['$scope', function($scope){

  var c = this;

 c.search = function(){
        var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q: 'beatles'
        });

        request.execute(function(response){
                    var responseString = JSON.stringify(response, '', 2);
                    c.data = responseString;
           });
    }

          console.log(c.data);

    }]);

【讨论】：

@mpgn 他已经实现了myController as c 语法。所以我已经以适当的方式给出了它。也就是说，像这样分配var c = this;。当我们以正确的方式使用东西时，大部分时间它都可以工作。等待OP的反馈......
这似乎解决了问题，但它仍然有一个小问题。结果在第二次点击按钮后记录到控制台，而不是第一次！
第二次按钮点击是什么意思？你只有1个按钮没有？即Press me! 按钮只有没有？