javascript - ng-repeat 标签不刷新模型中的数据

Question

我想知道为什么我的 ng-repeat 没有从我试图显示的数组中刷新数据。这是 html 代码片段:

<div ng-controller="photoCtrl as c">
        <div ng-repeat="p in c.photos">
            <div>USER: {{p.user_id}</div><br/>
            <div>PHOTO NAME: {{p.name}}</div><br/>
            <div>PRICE: {{p.price}}</div><br/>
            <hr>
        </div>

        <button ng-click="prev()">Prev</button><input type="number" ng-model="page_nr"><button ng-click="next()">Next</button>
    </div>

这是我的 Angular Controller 代码:

    app.controller('photoCtrl', ['$scope', '$window', 'PhotoFactory', function($scope, $window, PhotoFactory){
    $scope.photos = [];
    $scope.page_nr = 0;
    $scope.searchNextFive = function(){
        let toSend = angular.copy($scope.page_nr);
        PhotoFactory.searchNextFive(toSend).then(function(response){
            $scope.photos = angular.copy(response.data);
            console.log($scope.photos);
        });
    };

    $scope.getAll = function(){
        let toSend = angular.copy($scope.user);
        PhotoFactory.getAll(toSend).then(function(response){
            $scope.photos = angular.copy(response.data);
            console.log($scope.photos);
        });
    };
    $scope.prev = function(){
        $scope.page_nr--;
        $scope.searchNextFive();
    };

    $scope.next = function(){
        $scope.page_nr++;
        $scope.searchNextFive();
    };
}]);

代码没有给出任何错误。更改完成后，数组“照片”会正确刷新，我通过在 console.log() 上打印“照片”看到了它。我想知道为什么数据没有呈现。 ng-repeat 对 div 标签不起作用还是我做错了什么？

Answer 1

您正在混合使用两种方法，您预测一种方法与另一种方法的效果相同。在这里，您使用了 controllerAs 模式，其中定义了 Controller 别名 c，例如 ng-controller="photoCtrl as c"。这意味着您将通过将变量和函数附加到 this(context) 来公开绑定(bind)。但是您确实将变量和函数附加到 $scope，这意味着您不需要使用 Controller 别名。您可以通过从 HTML 中的变量名称中删除 c. 来快速解决此问题。

尽管我建议您使用 controllerAs 方法。唯一需要更改的是，从范围中删除所有绑定(bind)，并在 Controller 的开头创建一个名为 var vm = this; 的变量，然后替换所有 $scope。 与 vm..

并更改以下行

<button ng-click="prev()">Prev</button>
<input type="number" ng-model="page_nr"/>
<button ng-click="next()">Next</button>

到

<button ng-click="c.prev()">Prev</button>
<input type="number" ng-model="c.page_nr"/>
<button ng-click="c.next()">Next</button>