该视图未在 AngularJS 中更新

IT技术 javascript angularjs data-binding angular-services
2021-02-11 16:07:44

在事件回调中更新模型时,更新模型属性对视图没有影响,有什么解决方法吗?

这是我的服务:

angular.service('Channel', function() {        
    var channel = null; 

    return {        
        init: function(channelId, clientId) {
            var that = this;        

            channel = new goog.appengine.Channel(channelId);
            var socket = channel.open();

            socket.onmessage = function(msg) {
                var args = eval(msg.data);              
                that.publish(args[0], args[1]);
            };
        }       
    };
});

publish() 功能是在控制器中动态添加的。

控制器:

App.Controllers.ParticipantsController = function($xhr, $channel) {
    var self = this;

    self.participants = [];     

    // here publish function is added to service
    mediator.installTo($channel); 

    // subscribe was also added with publish        
    $channel.subscribe('+p', function(name) { 
        self.add(name);     
    });                 

    self.add = function(name) {     
        self.participants.push({ name: name });     
    }
};

App.Controllers.ParticipantsController.$inject = ['$xhr', 'Channel'];

看法:

<div ng:controller="App.Controllers.ParticipantsController">      
    <ul>
        <li ng:repeat="participant in participants"><label ng:bind="participant.name"></label></li>
    </ul>

    <button ng:click="add('test')">add</button>
</div>

所以问题是点击按钮会正确更新视图,但是当我从 Channel 收到消息时什么也没发生,甚至add()调用了函数

1个回答

你不见了$scope.$apply()

每当您触摸 Angular 世界之外的任何东西时,您都需要调用$apply, 来通知 Angular。那可能来自:

  • xhr 回调(由 $http 服务处理)
  • setTimeout回调(由$defer服务处理
  • DOM 事件回调(由指令处理)

在您的情况下,请执行以下操作:

// inject $rootScope and do $apply on it
angular.service('Channel', function($rootScope) {
  // ...
  return {
    init: function(channelId, clientId) {
      // ...
      socket.onmessage = function(msg) {
        $rootScope.$apply(function() {
          that.publish(args[0], args[1]);
        });
      };
    }
  };
});
对于setTimeout回调,请改用该$timeout服务:coderwall.com/p/udpmtq
2021-03-17 16:07:44
这很有帮助,一旦我想到为什么我必须在 DOM/jQuery 事件的情况下这样做,这对我来说很有意义并且我能够接受它。
2021-04-03 16:07:44
凉爽的。我不知道你可以注入根范围。
2021-04-10 16:07:44