$scope.关于不听$emit和$broadcast

我无法让控制器收听任何发射或广播消息。我也尝试过$rootScope，但它仍然不起作用。

<div ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
</div>
<div ng-controller="Controller1">
  <p>Hello {{name}}!</p>
</div> 
app.controller('MainCtrl', function($scope) {
  $scope.name = 'SomeName';
  $scope.$broadcast($scope.name, "Hello");
});
app.controller('Controller1', function($scope) {
  $scope.name = 'SomeName';
  $scope.$on($scope.name, function(event,data) {
    console.log("identified"); 
    console.log("data");
  });
});

演示： http://plnkr.co/edit/E95Ucn5Xa9zauwg4dsIA?p=preview

首先，

由于$broadcast将事件向下发送到子范围，因此您需要将Controller1嵌套在MainCtrl下以进行工作方法。

<div ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div ng-controller="Controller1">
        <p>Hello {{name}}!</p>
    </div>
</div>

第二个细微差别是您尝试立即在控制器中广播事件MainCtrl但是此时$scope.$on尚未在Controller1中注册，因此以这种方式调度事件毫无意义，因为还没有任何东西可以处理它。但是为了演示，如果您在一段时间超时后或在ngClick上广播事件，您将看到它工作正常。

演示：http://plnkr.co/edit/wo1IHggq9CiDHPVcgB4C?p=info

选项 B

如果要在同级控制器之间广播事件，则可以使用$rootScope和其他控制器，就像@dfsq答案一样

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
  $scope.name = 'SomeName';
  $timeout(function() {
    $rootScope.$broadcast($scope.name, "Hello");
  }, 1);
});
app.controller('Controller1', function($scope) {
  $scope.name = 'SomeName';
  $scope.$on($scope.name, function(event, data) {
    console.log("identified");
    console.log("data");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="plunker">
  <div ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
  </div>
  <div ng-controller="Controller1">
    <p>Hello {{name}}!</p>
  </div>
</body>

It needs Parent-> Child or Child-> Parent relationship but you are creating two isolated Divs.

将

一个与另一个嵌套在一起，然后它将起作用。

<div ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <div ng-controller="Controller1">
    <p>Hello {{name}}!</p>
  </div>
</div>

此处 MainCntrl 将是控制器 1 的父级

或

<div ng-controller="Controller1">
      <p>Hello {{name}}!</p>
      <div ng-controller="MainCtrl">
        <p>Hello {{name}}!</p>
      </div>
    </div>

此处 Controller1 将是 MainCntrl 的父控制器

演示：http://plnkr.co/edit/wo1IHggq9CiDHPVcgB4C?p=info

相关内容

最新更新

热门标签：