Angular中控制器之间的通信

新开发者

我熟悉以下实现控制器之间通信的方法。

还有其他吗?是否有更好的方法/最佳做法?


$broadcast/$emit

.controller("Parent", function($scope){
  $scope.$broadcast("SomethingHappened", {..});
  $scope.$on("SomethingElseHappened", function(e, d){..});
})
.controller("Child", functions($scope){
  $scope.$broadcast("SomethingElseHappened", {..});
  $scope.$on("SomethingHappened", function(e, d){..});
})
.controller("AnotherChild", functions($scope){
  $scope.$on("SomethingHappened", function(e, d){..});
});

或者,从视图中:

<button ng-click="$broadcast('SomethingHappened', data)">Do Something</button>

好处:

  • 适合一次性活动

缺点:

  • 在兄弟姐妹之间不起作用,除非使用了共同的祖先,例如$rootScope

功能范围继承

<div ng-controller="Parent">
  <div ng-controller="Child">
    <div ng-controller="ChildOfChild">
       <button ng-click="someParentFunctionInScope()">Do</button>
    </div>
  </div>
</div>

或者,在代码中

.controller("ChildOfChild", function($scope){
   $scope.someParentFunctionInScope();
});

好处:

  • 适用于从上到下的数据传播

缺点:

  • 自下而上的效果不佳,因为它需要一个对象(与原始对象相反)
  • 调用祖先函数会产生紧密耦合
  • 在兄弟姐妹之间不起作用,除非使用了共同的祖先,例如$rootScope

范围继承+ $watch

控制器只对作用域公开数据的变化做出反应,而不会调用函数。

.controller("Parent", function($scope){
  $scope.VM = {a: "a", b: "b"};
  $scope.$watch("VM.a", function(newVal, oldVal){
    // react
  });
}

好处:

  • 适用于非控制器创建的子范围,例如 ng-repeat

缺点:

  • 一次活动根本不起作用
  • 不太可读的代码

其他值得注意的提及:

  • 具有特殊功能的共享服务
  • 更一般的发布/订阅服务
  • $rootScope
塞缪尔·内夫(Samuel Neff)

我使用功能特定的共享服务在控制器之间进行通信。

您可以创建一个通用的共享服务来拥有一个订阅和广播事件的中心点,但是我发现随着时间的推移,特定于功能的服务更易于维护,尤其是随着项目和团队的成长。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章