我正在尝试使用 youtube 的 API 发出搜索请求，并将结果存储到 AngularJS Controller 内的一个变量中。
这是我的 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 方式)，这会起作用，并且结果会成功显示(此行目前已被注释掉)。
为什么响应结果不能存储在这个函数之外的变量中？
最佳答案
请这样尝试。
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);
}]);
关于javascript - AngularJS Controller 无法将 Youtube API 响应结果存储到变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36958100/