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

整个项目是在这里：https://github.com/hochitom/node-twitter-client

来源

2013-04-24 hochitom

尝试添加$范围$适用（）在addTweet和看到的结果，如果观点。更新与否 – 2013-04-24 07:39:01

在addTweet和添加下面的代码行问题将被解决

$scope.addTweet = function (data) { 
      $scope.tweets.push(data); 
      $scope.$apply(); 
      console.log($scope.tweets); 
     };

来源

2013-04-24 09:06:37

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

    //... 

});

来源

2017-11-18 20:25:18 Hafez

angular.js：模型更新不会触发视图更新

回答

相关问题