AngularJS：$ scope.array.push（）不更新视图，甚至$申请 [英] AngularJS: $scope.array.push() does not update the view, even with $apply

问题描述

我想学习AngularJS并没有这件事，我不明白，这似乎是通过使用 $范围内解决了所有的互联网。$适用，但我已经在使用它，它什么都不做。

I'm trying to learn AngularJS and there is this thing that I don't understand, which seems like all the internet solved by using $scope.$apply, but I already use it and it does nothing.

基本上，我使用Twitter的API来获取一个时间表，当我们从底部滚动，它加载更多的鸣叫。这部分的工作，我使用一个工厂做，但我可以显示对象在控制台接收，我没有问题，在这里。

Basically, I use Twitter API to retrieve a timeline, and when we scroll from the bottom, it loads more tweets. This part works, I'm using a factory to do it, but I can display the object receive in the console, I don't have issues here.

我有这样一个观点，来显示数据：

I have a view like this, to display the data:

<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>

我的控制器看起来是这样的：

My controller looks like this:

    $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);
        });
    });

数据是合法的。

事情我不明白在所有，让我觉得这件事情很容易解决，我只是没有看到它，就是如果我使用的，而不是'=数据'推送（数据）'该视图被更新。甚至当我加载更多的微博，如果我使用'='的观点被更新（与内容被替换这当然不是我想要的）。

The thing I don't understand at all, and make me think that it's something very easy to solve and I just don't see it, is that if I use '= data' instead of 'push(data)' the view is updated. Even when I load more tweets, if I use '=' the view is updated (with the content being replaced of course which is not what I want).

请注意：maxId，sinceId和计数更早初始化，我没有把它放在那里，因为我不认为它很重要。

Note: maxId, sinceId and count are initialized earlier, I didn't put it there since I don't think it matters.

推荐答案

麻烦似乎是角的 NgRepeat 停止，如果它遍历了的相同对象不止一次。我创建的jsfiddle 来证明。

The trouble seems to be that Angular's NgRepeat stops if it iterates over the same object more than once. I've created a jsFiddle to demonstrate.

在第一部分中，您可以添加到字符串数组。第一个按钮随时添加相同的字符串对象，而第二个创建一个新的字符串对象各一次。当您单击两次的第一个按钮为很快就注意到，这不要紧，你添加到列表中的内容。

In the first section, you can add strings to an array. The first button always add the same string object, while the second creates a fresh string object each time. Notice that as soon as you click the first button twice, it doesn't matter what you add to the list.

在第二部分中，我们随时添加一个新的对象，即使这些对象都含有相同的字符串对象的引用。这工作你所期望的。

In the second section, we always add a fresh object, even though those objects all contain a reference to the same string object. This works as you would expect.

因此​​，为了使这是一个明确的答案，请确保您添加到列表中的东西的不同的的对象，并使用对象文本如果需要强制执行这一点。我想preFER 阵列＃推在阵列＃CONCAT ，因为后者创建了一个新的数组每次对象，如果你有很多的项目，这将是一个大量流失和大量的垃圾收集。

So, to make this an explicit answer, make sure the things you add to your list are distinct objects, and use object literals to enforce this if needed. I would prefer Array#push over Array#concat because the latter creates a new array object each time, and if you have a lot of items, that will be a lot of churn and a lot of garbage collection.

中的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的：

The 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 = [];
        };
    });
})();

这篇关于AngularJS：$ scope.array.push（）不更新视图，甚至$申请的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！