Angular 中控制器之间的通信 [英] Communication between controllers in Angular

问题描述

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

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

$broadcast/$emit

.controller("Parent", function($scope){$scope.$broadcast("SomethingHappened", {..});$scope.$on(SomethingElseHappened", function(e, d){..});}).controller(子"，函数($scope){$scope.$broadcast(SomethingElseHappened", {..});$scope.$on("SomethingHappened", function(e, d){..});}).controller(另一个孩子"，函数($scope){$scope.$on("SomethingHappened", function(e, d){..});});

或者，从视图中:

<button ng-click="$broadcast('SomethingHappened', data)">做某事</button>

优点:

• 适合一次性活动

缺点:

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

函数的作用域继承

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

或者，在代码中

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

优点:

• 适合自上而下的数据传播

缺点:

• 自下而上不太好，因为它需要一个对象(而不是原始对象)
• 调用祖先函数会造成紧密耦合
• 在兄弟姐妹之间不起作用，除非使用了一个共同的祖先，比如$rootScope

作用域继承 + $watch

控制器只对作用域公开数据的变化做出反应，从不调用函数.

.controller("Parent", function($scope){$scope.VM = {a: a", b: b"};$scope.$watch(V​​M.a", function(newVal, oldVal){//反应});}

优点:

• 适用于不是由控制器创建的子作用域，例如就像在 ng-repeat
中一样

缺点:

• 对一次性事件根本不起作用
• 不太可读的代码

其他值得注意的提及:

• 具有专门功能的共享服务
• 更通用的发布/订阅服务
• $rootScope

解决方案

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

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

I'm familiar with the following methods to implement communication between controllers.

Are there others? Are there better approaches / best practices?

$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){..});
});

or, from the View:

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

Advantages:

• Good for one-time events

Disadvantages:

• Does not work between siblings, unless a common ancestor, like $rootScope, is used

Scope inheritance of functions

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

or, in code

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

Advantages:

• Good for top-to-bottom data propagation

Disadvantages:

• Not-as-good for bottom-to-top, since it requires an object (as opposed to a primitive)
• Calling ancestor functions creates a tight coupling
• Does not work between siblings, unless a common ancestor, like $rootScope, is used

Scope inheritance + $watch

Controllers only react to change in scope-exposed data and never call functions.

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

Advantages:

• Good for child scope not created by controllers, e.g. like within ng-repeat

Disadvantages:

• Doesn't work at all for one-time events
• Not very readable code

Other notable mentions:

• Shared Service with specialized functionality
• More general Pub/Sub Service
• $rootScope

解决方案

I use functionality-specific shared services to communicate between controllers.

You can create a generic shared service to have a central point to subscribe to and broadcast events, but I find functionality-specific services to be easier to maintain over time, especially as the project and team grows.

这篇关于Angular 中控制器之间的通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！