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

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：我有一个输入文本类型，用户输入他们的搜索关键字，然后按回车键运行搜索，当按回车键时它也会更改地址。也许这会导致问题？

这里是部分：

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

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

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

为什么它不运行？我应该看到“嘿”5 次。

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

编辑 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：如果我注释掉 $location.path 更改，则在 $scope.videos 之后添加 $scope.apply(); 有效，并且它保持在同一视图上。但是当我改变视图时它不起作用。这是我的路由器：

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 刚刚发生了一个异步事件。