我正在尝试学习AngularJS,有这样的东西,我不明白,这似乎是所有的互联网解决了使用$scope.$apply,但我已经使用它,它什么都不做.
基本上,我使用Twitter API来检索时间轴,当我们从底部滚动时,它会加载更多的推文.这部分工作,我正在使用一个工厂来做,但是我可以在控制台中显示对象接收,这里没有问题.
我有这样的视图来显示数据:
<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>
我的控制器如下所示:
$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); }); });
数据是合法的
我不明白的事情,让我认为这是很容易解决的,我只是看不到它,是如果我使用’=数据’而不是’推(数据)’视图是更新.即使我加载更多的推文,如果我使用’=’,则视图被更新(当然,内容被替换不是我想要的).
注意:maxId,sinceId和count被初始化,我没有把它放在那里,因为我不认为它很重要.
麻烦似乎是Angular的NgRepeat停止,如果它多次迭代相同的对象.我有
created a jsFiddle演示.
在第一部分中,您可以向数组添加字符串.第一个按钮总是添加相同的字符串对象,而第二个按钮会每次创建一个新的字符串对象.请注意,一旦您点击了第一个按钮两次,就不用考虑添加到列表中.
在第二部分中,我们总是添加一个新对象,即使这些对象都包含对同一个字符串对象的引用.这可以像你所期望的那样工作.
所以,为了做出这个明确的答案,确保添加到列表中的东西是不同的对象,如果需要,使用对象文字来强制执行.我更喜欢Array#push over 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 = []; }; }); })();