正在更新 Angular 中的 Controllers/UI 个元素

Question

在处理项目时，由于这些事情往往会发生，我们遇到了这样一种情况，即在完成其他事情时，我们对如何更新某些 UI 元素感到困惑。例如，导航包含今天有多少未决活动到期的计数器。在应用程序使用期间的任何时间点，用户可能会安排今天晚些时候的 activity，并且计数部分需要调用 API 来生成计数和关联的下拉项有了它。

如何在主控制器进行更改时让导航控制器拉取新的活动列表？

有关示例，请参阅 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 其他控制器可以订阅，然后在创建 activity 时根据需要进行回调运行。这很好用，但我很紧张，因为我 "doing it wrong".

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

Answer 1

虽然我通常认为在控制器上注册范围值与服务是完成另一个选项的最佳方法是使用工厂并在范围上设置属性。

angular.module('app').factory('myService', function() {
   var myService = {};
   service.count = 0;
   /// other service functions
   return myService;
}


angular.module('app').controller('myController', function(myService) {
   this.count = myService.count;
}

Answer 2

处理此问题的一个好方法是使用 $scope.$on 来侦听事件，并使用 $scope.$emit 来触发范围内的事件或 $scope.$broadcast 来触发事件缩小范围。

在每个需要更新的 UI 中，可以使用 $scope.$on 进行监听并在触发事件时更新自身，例如您的用户为今天晚些时候安排的事件。

Angular docs for $on, $emit and $broadcast

Answer 3

无论您对 MVC 有何看法，您都可以使用 angular 的内部机制来自动执行此操作：

https://jsfiddle.net/gkmtkxpm/

var myApp = angular.module('myApp', []);

myApp.factory('counter', function() {
    return {
        count: 0
    };
});

myApp.controller('CounterController', function (counter) {
    var vm = this;

    vm.counter = counter;
    vm.increment = function() {
        vm.counter.count = vm.counter.count + 1;
    };
});

编辑：关于您更新的问题，请参阅更新的 fiddle： https://jsfiddle.net/gkmtkxpm/1/

正在更新 Angular 中的 Controllers/UI 个元素

Updating Controllers/UI Elements In Angular

angularjs

angular-routing

angular-ui-router