javascript - angularjs:创建用于闪烁消息的系统

Question

我的 AngularJS 应用具有以下简化的行为:

我创建了一个 Services 模块，其中包含一个名为 server 的工厂。此 server 模块处理我与 websocket 服务器的通信。当在此 websocket 连接中发生事件时，我想在我的 MainController 中显示一条闪烁的消息。

我的服务:

return function init() {
  ws = new WebSocket(...);
  ws.onopen(function () {
    $rootScope.$broadcast("flash", "websocket connected");
  });
};

我的看法:

<article ng-controller=MainController ng-init=init()>
  <section ng-show="flash.length > 0">
    <p ng-repeat="message in flash">
      {{ message }}
    </p>
  <section>
  <section ng-view>
  ...
</article>

我的 Controller :

function MainController ($rootScope, $scope, server) {
  $scope.init = function () {
    $scope.flash = [];
    server.init(); 
  };
  $scope.on("flash", function (event, flash) {
    $scope.flash.push(flash);
    // $scope.$apply("$scope.flash"); <-- if I uncomment this line, I get the error...
    console.debug($scope.flash[$scope.flash.length -1]);
  });
};

如果我运行此代码，我会在 websocket 连接上收到调试消息，但仅当我单击按钮 f.e 时，才会应用对 flash 数组的更改。或者如果我调用 $apply 函数。后者会导致“应用已在进行中”的错误。经过一番研究后，我确信调用 $apply 是没有必要的。

那么:如何改变 flash 数组以立即通知 View 有关更改的方式？

Answer 1

好吧，您确实需要从 WebSocket 代码调用 $apply。 WebSocket 事件发生在 Angular 之外，因此它是必要的。如果您的 $apply 导致摘要已在处理中的消息，是否有可能其他一些代码也在发送“flash”消息？

我建议您将 $apply 调用放在您的 WebSocket 代码中:

return function init() {
  ws = new WebSocket(...);
  ws.onopen(function () {

    $rootScope.$apply(function() {
      $rootScope.$broadcast("flash", "websocket connected");
    });

  });
};

额外

如果你真的需要将 $apply 放在你的 Controller 中(我不推荐这样做)，那么你可以尝试“安全应用”模式:

$scope.$safeApply = function (fn) {
  var phase = this.$root.$$phase;
  if (phase == '$apply' || phase == '$digest') {
    if (fn && (typeof (fn) === 'function')) {
      fn();
    }
  } else {
    this.$apply(fn);
  }
};

然后，当您收到“闪光”事件时，您可以这样做:

$scope.$safeApply(function() {
  $scope.flash.push(flash);
});

同样，我认为这种方法将 $apply 的知识放在了错误的位置，但它有可能实现您的目标。