angular.js:模型更新不会触发视图更新
我目前正在基于web的twitter客户端上工作,因此我使用angular.js,node.js和socket.io。我通过socket.io向我的客户端推送新的推文,在那里服务等待新的推文。当新的推文到达时,服务通过$ broadcast发送一个事件。angular.js:模型更新不会触发视图更新
在我的控制器是一个事件侦听器,传入的推文正在一个单独的函数中处理。这个功能只是推动我的推特范围内的新推文。
现在,我的问题是,我的观点没有更新,但我可以看到我的范围在增长。也许你们有一个想法,我该如何解决这个问题?
另外我的代码:
服务:
(function() {
app.factory('Push', ['$rootScope', function ($rootScope) {
socket.on('new-tweet', function (msg) {
$rootScope.$broadcast('new-tweet', msg);
});
}]);
}());
控制器:
(function() {
app.controller("StreamCtrl", function StreamCtrl ($scope, $rootScope, $http, Push) {
$scope.tweets = [];
$http
.get('/stream')
.then(function (res) {
$scope.tweets = res.data;
});
$scope.addTweet = function (data) {
$scope.tweets.push(data);
console.log($scope.tweets);
};
$rootScope.$on('new-tweet', function (event, data) {
if (!data.friends) {
$scope.addTweet(data);
}
});
});
}());
在addTweet和添加下面的代码行问题将被解决
$scope.addTweet = function (data) {
$scope.tweets.push(data);
$scope.$apply();
console.log($scope.tweets);
};
谢谢。 $ scope。$ apply()帮助了我。只是好奇 - 这是更新视图的正确方法吗?意义,不应该角度“决定”范围已经改变了吗? – 2014-03-04 12:43:55
这是一个很好的问题,http://jimhoskins.com/2012/12/17/angularjs-and-apply.html吉姆霍斯金斯有一个很好的总结,为什么'应用'在这种情况下,是必要的。 – KidA78 2014-06-29 00:34:14
非常感谢您的回答。 $ scope。$ apply()为我工作。我曾经使用$ injector.invoke(...)动态设置控制器。但无法获取视图中更新的$ scope变量。 $ scope变量只在按下按钮或模糊时更新,但是当我使用$ scope。$ apply()时,$ scope变量在页面最初加载时立即在视图上更新。非常感谢。 – 2014-11-26 15:26:03
我更喜欢使用$timeout
(不要忘了将它注入到控制器),而不是$apply
:
app.controller("StreamCtrl", function StreamCtrl ($scope, $timeout $rootScope, $http, Push) {
//...
$scope.addTweet = function (data) {
$timeout(function() {
$scope.tweets.push(data);
console.log($scope.tweets);
});
};
//...
});
尝试添加$范围$适用()在addTweet和看到的结果,如果观点。更新与否 – 2013-04-24 07:39:01