angularjs - 更新 Angular 中的 Controller /UI 元素

Question

在处理项目时，由于这些事情很容易发生，我们遇到了一种情况，即在其他事情完成后如何更新某些 UI 元素。例如，导航包含一个计数器，显示今天有多少待处理的事件到期。在使用应用程序期间的任何时间点，用户可能会安排今天晚些时候的事件，并且计数部分需要调用 API 来生成计数以及与其关联的下拉项。

当主 Controller 发生更改时，如何使导航 Controller 拉取新的事件列表？

参见this code举个例子。

<div ng-app="TestApp">
  <nav ng-controller="navigationController">
    <p>The navigation count is: {{items.length}}</p>
  </nav>
  <div ng-controller="mainController">
    <p>The main count is: {{items.length}}</p>
    <p>
      <button ng-click="addItem()" type="button">Add item.</button>
    </p>
  </div>
</div>

<script>
var app = angular.module('TestApp', []);

app.factory("api", function() {
  return {
    update: function() {
      return ['a', 'b', 'c', 'd', 'e'];
    }
  };
});

app.factory("sharedFactory", function(api) {  
  var obj = {};

  obj.items = ["a"];

  obj.update = function() {
    obj.items = api.update();
  };

  return obj;
});

app.controller("mainController", function(sharedFactory, $scope) {
  $scope.items = sharedFactory.items;

  $scope.addItem = function() {
    sharedFactory.update();
  };
});

app.controller("navigationController", function(sharedFactory, $scope) {
  $scope.items = sharedFactory.items;
});

</script>

我们当前的解决方案是 create a callback service其他 Controller 可以订阅，然后在创建事件时根据需要运行这些回调。这很好用，但我很紧张，因为我“做错了”。

我们现在正在切换到 Angular UI Router，所以我很好奇是否有更好的方法。现在我们的导航处理程序是一个无状态 Controller ，仍然挂接到我们的回调服务中。

Answer 1

处理这个问题的一个好方法是使用 $scope.$on 来监听事件，并使用 $scope.$emit 来触发事件scope 或 $scope.$broadcast 触发一个均匀的向下范围。

在需要更新的 UI 的每个部分中，都可以使用 $scope.$on 进行监听，并在事件触发时自行更新，就像您的用户在今天晚些时候安排一个事件一样。

Angular docs for $on, $emit and $broadcast