angularjs：从指令广播到控制器答案

【问题标题】：angularjs: broadcast from directive to controllerangularjs：从指令广播到控制器
【发布时间】：2013-09-30 21:04:37
【问题描述】：

我试图从指令中向其父控制器发送消息（没有成功）

这是我的 HTML

<div ng-controller="Ctrl">
   <my-elem/>
</div>

这是控制器中监听事件的代码

$scope.on('go', function(){ .... }) ;

最后指令看起来像

angular.module('App').directive('myElem',
   function () {
    return {
        restrict: 'E',
        templateUrl: '/views/my-elem.html',
        link: function ($scope, $element, $attrs) {
            $element.on('click', function() {
                  console.log("We're in") ; 
                  $scope.$emit('go', { nr: 10 }) ;
            }
        }
    }
  }) ;

我尝试了不同的范围配置和 $broadcast 而不是 $emit。我看到该事件被触发，但控制器没有收到“go”事件。有什么建议吗？

【问题讨论】：

你是用$scope.$on('go', function(){ .... });还是打错字了？
这种事件通信方法已经过时了。见AngularJS Developer Guide - Component-based application architecture。

标签： angularjs angularjs-scope dom-events angularjs-components

【解决方案1】：

`$broadcast`、`$emit` 和 `$on` 已弃用

不推荐使用范围/rootScope 事件总线，这将使迁移到 Angular 2+ 更加困难。

为了便于更轻松地过渡到 Angular 2+，AngularJS 1.5 引入了components：

app.component("myElem", {
    bindings: {
      onGo: '&',
    },
    template: `
        <button ng-click="$ctrl.go($event,{nr:10})">
            Click to GO
        </button>
    `,
    controller: function() {
        this.go = (event,data) => {
            this.onGo({$event: event, $data: data});
        };
    }
});

用法：

<div ng-controller="Ctrl as $ctrl">
   <my-elem on-go="$ctrl.fn($data)></my-elem>
</div>

组件使用带有 AngularJS 表达式 (&) 绑定的属性，该属性调用父控制器中的函数。事件不会用大量事件阻塞 scope/rootScope 事件总线，而是直接转到使用它的函数。

The DEMO

angular.module('app', [])
.controller ('Ctrl', function () {
    this.go = (data) => {
      console.log(data);
      this.update = data;
    };
})
.component("myElem", {
    bindings: {
      onGo: '&',
    },
    template: `
      <fieldset>
        <input ng-model="$ctrl.nr" /><br>
        <button ng-click="$ctrl.go($event,$ctrl.nr)">
            Click to Update
        </button>
      </fieldset>
    `,
    controller: function() {
        this.nr = 10;
        this.go = (event,data) => {
            this.onGo({$event: event, $data: data});
        };
    }
})

<script  src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="Ctrl as $ctrl">
    <p>update={{$ctrl.update}}</p>
    <my-elem on-go="$ctrl.go($data)"></my-elem>
</body>

有关详细信息，请参阅

AngularJS Developer Guide - Component-based application architecture

【讨论】：

【解决方案2】：

要获得 { nr: 10 }，您应该向侦听器添加 2 个参数：event 和 data：

$scope.$on('go', function(event, data){ 
  alert(JSON.stringify(data));
});

（请记住，我们使用 $on 而不是 on）

Full example in plunker

【讨论】：

【解决方案3】：

没有具有作用域的方法on。在角度它是$on

下面应该适合你

<!doctype html>
<html ng-app="test">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>

  </head>
 <body ng-controller="test" >    
 <my-elem/>

<!-- tabs -->


 <script>
     var app = angular.module('test', []);
     app.controller('test', function ($scope) {

         $scope.$on('go', function () { alert('event is clicked') });
     });
     app.directive('myElem',
   function () {
       return {
           restrict: 'E',
           replace:true,
           template: '<div><input type="button" value=check/></input>',
           link: function ($scope, $element, $attrs) {
               alert("123");
               $element.bind('click', function () {
                   console.log("We're in");
                   $scope.$emit('go');
               });
               }
       }
   }) ;

   </script>
</body>


</html>

【讨论】：

结束标签 </input> 是错误的 HTML。

$broadcast、$emit 和 $on 已弃用

The DEMO

`$broadcast`、`$emit` 和 `$on` 已弃用