Angularjs 角度传感器中控制器之间的通信

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

还有其他的吗？是否有更好的方法/最佳实践

$broadcast

/

$emit

或者，从这个角度来看：

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

或者，在代码中

.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

---

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

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

如前所述，建议使用服务共享数据。其思想是，数据的状态保持一致，而与任何控制器无关。 这两篇文章可以让您了解“如何”和“为什么”：

--还有另一个选项可以继承和在控制器之间共享数据：

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

    var parent = function($scope){
        $scope.parent = {
             parentData: 'some data'
        }
    };

    // you could do some prototyping as well
//parent.prototype.parent2 = {
//    parentData: 'some more data'
//};

    var child = function($scope){
        parent.call(this, $scope);
        //$scope.parent2 = this.parent2; here is how you access that data.
    };
    child.prototype = Object.create(parent.prototype);
    child.prototype.constructor = child;


app.controller('parent', parent);

app.controller('myController', child);

此方法为您提供了一个优势：

• 适用于同级作用域，不需要DOM结构

您可以继续使用创建自定义属性的对象，“冻结”数据变量以保留相同的数据并确保数据不被修改，等等

最后，我更喜欢使用服务在控制器之间共享数据，并使用observer模式或带有rootscope emit/on的pub/sub来确认控制器内的操作。

您可能需要签出

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

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

    var parent = function($scope){
        $scope.parent = {
             parentData: 'some data'
        }
    };

    // you could do some prototyping as well
//parent.prototype.parent2 = {
//    parentData: 'some more data'
//};

    var child = function($scope){
        parent.call(this, $scope);
        //$scope.parent2 = this.parent2; here is how you access that data.
    };
    child.prototype = Object.create(parent.prototype);
    child.prototype.constructor = child;


app.controller('parent', parent);

app.controller('myController', child);