AngularJS:即使使用 $apply，$scope.array.push() 也不会更新 View

Question

我正在尝试学习 AngularJS，但有件事我不明白，这似乎是所有互联网都通过使用 $scope.$apply 解决的，但我已经使用它并且它什么也不做。

基本上，我使用 Twitter API 来检索时间线，当我们从底部滚动时，它会加载更多推文。这部分有效，我正在使用工厂来完成它，但我可以在控制台中显示接收的对象，我在这里没有问题。

我有一个像这样的 View ，用于显示数据:

<div class='timeline' ng-controller='TimelineCtrl' is-scrolled='loadData()'>
    <div class='tweet' ng-repeat='p in posts'>
        <img class='portrait' src='{{p.user.profile_image_url}}' />
        <p>{{p.text}}</p>
        <p class='date'>{{p.created_at}}</p>
    </div>
</div>

我的 Controller 如下所示:

    $scope.posts = [];

    // Load the original tweets list
    TwitterAPI.timeline($scope.count, function(data) {
        $scope.$apply(function() {
            $scope.maxId = data[data.length-1].id;
            $scope.sinceId = data[0].id;
            $scope.posts.push(data);
        });
    });

数据是合法的。

我根本不明白的事情是，如果我使用“= data”而不是“push(data)”，这让我认为这是很容易解决的事情，但我只是没有看到它 View 已更新。即使我加载更多推文，如果我使用“=”， View 也会更新(当然内容会被替换，这不是我想要的)。

注意:maxId、sinceId 和 count 已提前初始化，我没有将其放在那里，因为我认为这并不重要。

Answer 1

问题似乎是 Angular 的 NgRepeat 如果多次迭代同一个对象，就会停止。我有created a jsFiddle来演示。

在第一部分中，您可以将字符串添加到数组中。第一个按钮始终添加相同的字符串对象，而第二个按钮每次都会创建一个新的字符串对象。请注意，只要单击第一个按钮两次，添加到列表中的内容就不再重要。

在第二部分中，我们总是添加一个新对象，即使这些对象都包含对同一字符串对象的引用。这正如您所期望的那样工作。

因此，为了使其成为明确的答案，请确保添加到列表中的内容是不同的对象，并在需要时使用对象文字来强制执行此操作。我更喜欢 Array#push 而不是 Array#concat ，因为后者每次都会创建一个新的数组对象，如果你有很多项目，那就会很多流失和大量垃圾收集。

HTML:

<div ng-controller="Controller1">
    <button ng-click="addLine()">Add Line</button>
    <button ng-click="addNumber()">Add Number</button>
    <button ng-click="reset()">Reset</button>
    <div>{{lines}}</div>
    <div ng-repeat="line in lines">
        {{line}}
    </div>
</div>

<hr />

<div ng-controller="Controller2">
    <button ng-click="addObject()">Add Object</button>
    <button ng-click="reset()">Reset</button>
    <div>{{objects}}</div>
    <div ng-repeat="obj in objects">
        {{obj.data}}
    </div>
</div>

JavaScript:

(function () {
    var myApp = angular.module('myApp', []);

    myApp.controller('Controller1', function ($scope) {
        $scope.lines = [];

        $scope.addLine = function () {
            $scope.lines.push('Hello world!');
        };

        $scope.addNumber = function () {
            $scope.lines.push('Line ' + $scope.lines.length);
        };

        $scope.reset = function () {
            $scope.lines = [];
        };
    });

    myApp.controller('Controller2', function ($scope) {
        $scope.objects = [];

        $scope.addObject = function () {
            var obj = { data: 'Hello world!' };
            $scope.objects.push(obj);
        };

        $scope.reset = function () {
            $scope.objects = [];
        };
    });
})();