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

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

javascript angularjs youtube-api

Javascript AngularJS控制器无法将Youtube API响应结果存储到变量,javascript,angularjs,youtube-api,Javascript,Angularjs,Youtube Api,我试图使用youtube的API发出搜索请求，并将结果存储到AngularJS控制器中的一个变量中这是我的app.js文件 var app = angular.module('myApp', []); app.controller('myController', ['$scope', function($scope){ this.data = '###'; this.search = function(){ var request = gapi.clien

我试图使用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>


按我！
结果
{{c.data}}

在html代码中，有一个

press me

按钮，它调用发出请求的

search（）

函数。javascript控制台显示请求已成功执行

我将响应结果存储到名为

data

的变量中。问题是变量的内容没有改变。但是，如果我将此值存储在文档元素的

.innerHTML

中（经典的Javascript方式），则此操作有效，结果将成功显示（此行当前已注释掉）

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

请这样尝试

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

    }]);

我假设

gapi.client

不是一个角度库。搜索请求在angularjs之外结束，因此angularjs不会用新响应更新范围。您必须在

请求的回调中调用摘要循环。执行。类似于以下的方法应该可以工作：
request.execute(function(response){
        var responseString = JSON.stringify(response, '', 2);
        this.data = responseString;
        $scope.$digest();
    });

我希望这会有所帮助。
最后，问题的解决方案是结合上述两个答案：
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
值。现在，按下按钮时，结果显示在页面中。
@mpgn他已将myController实现为c
语法。因此，我以正确的方式给出了它。也就是说，像这样赋值var c=this。当我们以正确的方式使用东西时，大部分时间都是有效的。等待OP的反馈……这似乎解决了问题，但仍然有一个小问题。结果在第二次按钮点击后记录到控制台，而不是第一次！第二次按钮点击是什么意思？你只有一个按钮没有？i、 e.按我仅按钮否？