在angularjs中使用$broadcast/$on触发事件的最佳实践/备选方案是什么？_Angularjs_Angularjs Directive_Angularjs Scope_Angularjs Service

在angularjs中使用$broadcast/$on触发事件的最佳实践/备选方案是什么？

angularjs

在angularjs中使用$broadcast/$on触发事件的最佳实践/备选方案是什么？,angularjs,angularjs-directive,angularjs-scope,angularjs-service,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Service,我有一个场景，我想在不同应用程序中的兄弟控制器之间进行通信。所以我创建了一个示例，它使用publisher-subscriber服务来广播和侦听事件。但是订阅事件的代码在控制器中。所以我想知道这是否是一种最佳实践？举例来说，实现同样目标的替代方法是什么？我指出了以下情况– controllerA广播事件，controllerB和controllerC收听（1-Many） Html代码： <body class='container'> <div ng-controller

我有一个场景，我想在不同应用程序中的兄弟控制器之间进行通信。所以我创建了一个示例，它使用publisher-subscriber服务来广播和侦听事件。但是订阅事件的代码在控制器中。所以我想知道这是否是一种最佳实践？举例来说，实现同样目标的替代方法是什么？

我指出了以下情况–
controllerA广播事件，controllerB和controllerC收听（1-Many）

Html代码：

<body class='container'>
  <div ng-controller="controllerA">
    <input data-ng-model="teamName" type="text" data-ng-change="changeTeam()" />    
  </div>
  <div ng-controller="controllerB">controllerB - You typed: {{team}}
    <br />
  </div>
  <div ng-controller="controllerC">controllerC - You typed:{{team}}</div>
</body>


controllerB-您键入：{{team}


controllerC-您键入：{{team}

在分析之后，我提出了以下方法，将订阅逻辑移动到带有“&”运算符参数的指令，该参数允许调用或计算父作用域上的表达式/函数，并将控制器代码保持在最小值。因为在99%的情况下，把东西倒在控制器上是个坏主意。除非它是一个范围变量或手表，否则您很可能会将其抽象为其他内容

通过实现这种方式，我们可以使代码可重用、可测试和模块化

app.directive('onChangeName', ['pubsubService', function(pubsubService) {
  return {
    restrict: 'EA',
    scope: {
      onNameChangeCallback: '&'
    },
    link: function(scope, element) {
      pubsubService.Subscribe("changeNameEvent", scope, function(message) {
        scope.onNameChangeCallback({
          message: message.filterTeam
        });
      });
    }
  };
}]);

app.controller('controllerB', function($scope){
  $scope.callbackNameChanged = function(message) {
    $scope.team = message
  };
});

app.controller('controllerC', function($scope){
  $scope.callbackNameChanged = function(message) {
     $scope.team = message
  };
});

Html代码

<div ng-controller="controllerB">
    <on-change-name on-name-change-callback="callbackNameChanged(message)"></on-change-name>
    controllerB - You typed: {{team}}
    <br />
</div>
<div ng-controller="controllerC">
    <on-change-name on-name-change-callback="callbackNameChanged(message)"></on-change-name>
    controllerC - You typed:{{team}}
</div>


controllerB-您键入：{{team}


controllerC-您键入：{{team}

<div ng-controller="controllerB">
    <on-change-name on-name-change-callback="callbackNameChanged(message)"></on-change-name>
    controllerB - You typed: {{team}}
    <br />
</div>
<div ng-controller="controllerC">
    <on-change-name on-name-change-callback="callbackNameChanged(message)"></on-change-name>
    controllerC - You typed:{{team}}
</div>