Question

这是我的控制器代码：

.controller('vidController', ["$scope", "$location", "youtubeAPI", function($scope, $location, youtubeAPI) {
    if(document.getElementById('query')) { //See Note 1 Below*****
        var textElement = document.getElementById('query');
        textElement.onkeyup=function(e){ 
            if(e.keyCode==13){ //if key pressed is enter button
                console.log('Looking for ' + textElement.value + ' on YouTube');
                youtubeAPI.search(textElement.value);
                $location.path('/results'); //changes url path to results partial
                $scope.$apply();
            }
        }
    };
    // Called automatically with the response of the YouTube API request.
    window.onSearchResponse = function(response) {
        console.log(response); //Shows entire response data
        console.log(response.items[0].snippet.title); //shows video title
        console.log(response.items[0].id.videoId); //shows video Id
        console.log(response.items[0].snippet.thumbnails.medium.url); //shows video thumbnail
        $scope.videos = response.items;
        $scope.$apply();
        console.log($scope.videos); //This outputs an object with 5 Objects in it. Proof that the API is picking up something.
    };
}]);

*注1：我有一个输入文本类型，用户将其搜索关键字放入，然后按Enter键对其进行搜索，当按下回车键时，它也会更改地址。也许这会导致问题？

这是部分：

<ul>
    <li ng-repeat="video in videos">
    hey
    </li>
</ul>

由于我使用了youtubeAPI，因此每个搜索结果都会返回5个结果。 console.log($scope.video)在控制台中显示了5个对象，因此我知道它已被填充。

但是每当我转到我的部分页面并检查元素时，<ul>标记都是空的。就像ng-repeat从未跑过一样。

为什么不运行？我应该看到＆＃34;嘿＆＃34; 5次。

编辑：这是我代码中最后一个console.log的控制台输出 enter image description here

编辑2：根据请求，这里是运行onSearchResponse的地方。

angular.module('GameFindr.search', [])
.factory('youtubeAPI', [function() {

var youtubeAPI = { };

youtubeAPI.search = function(keyword) {
    // Use the JavaScript client library to create a search.list() API call.
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q: keyword,
        type: 'video',
    });

    // Send the request to the API server,
    // and invoke onSearchRepsonse() with the response.
    request.execute(onSearchResponse);
    }

    return youtubeAPI;
}]);

编辑3：如果我注释掉$scope.apply();更改，则$scope.videos工作后添加$location.path，并且它会保留在同一视图中。但是当我改变观点时它并不起作用。这是我的路由器：

angular.module('GameFindr', [
'ngRoute',
'GameFindr.controllers',
'GameFindr.search'
])

.config(['$routeProvider', function($routeProvider) {
$routeProvider.
    when('/', { templateUrl: 'home.html', controller: 'vidController' }).
    when('/results', { templateUrl: 'results.html', controller: 'vidController'}).
    otherwise({ redirectTo: '/' });
 }]);

Answer 1

你正在改变回调中的对象值，所以当回调中的值可用时，ng-repeat它已经以初始值运行，并且在你的情况下是未定义的。

尝试以下代码

$scope.videos = response.items;
$scope.$apply();

参考：github $ scope。$ apply（）在最后调用，告诉AngularJS刚刚发生异步事件。

为什么我的ng-repeat表现得像对象一样空？

1 个答案: