Question

我正在尝试使用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方式）中，则此方法可以正常显示（此行当前已注释掉）。

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

Answer 1

请尝试这样。

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);

    }]);

Answer 2

我假设gapi.client不是角度库。搜索请求在angularjs之外结束，因此angular不会用新响应更新范围。您必须在request.execute的回调中调用摘要周期。以下内容应该有效：

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

我希望这会有所帮助。

Answer 3

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

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值。现在，在按下按钮时，结果将显示在页面中。

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

3 个答案: