Question

在处理项目时，由于这些事情往往会发生，我们遇到的情况是，当其他事情完成时，我们难以更新某些UI元素。例如，导航包含一个计数器，显示今天有多少待处理活动到期。在使用应用程序的任何时间点，用户可能会在今天晚些时候安排活动，并且计数部分需要调用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其他控制器可以订阅，然后在创建活动时，根据需要运行这些回调。这很好用，但我很紧张，我“做错了”。

我们现在正在切换到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感觉如何，你都可以使用角度内部来自动执行此操作：

https://jsfiddle.net/gkmtkxpm/

GridViewId.Columns[index].Visible = false;//Put index number to hide the Columns like 0,1 etc..

修改：关于您更新的问题，请参阅更新的小提琴： https://jsfiddle.net/gkmtkxpm/1/

在Angular中更新控制器/ UI元素

3 个答案: