angularjs: broadcast from directive to controller angularjs: broadcast from directive to controller angularjs angularjs

angularjs: broadcast from directive to controller


angularjs angularjs-scope dom-events angularjs-components

There is no method on with scope. In angular it's $on

below should work for you 

<!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>

angularjs angularjs-scope dom-events angularjs-components

To get { nr: 10 } you should add 2 arguments to listener: event and data:

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

(keep in mind that we use $on and not on)

Full example in plunker

angularjs angularjs-scope dom-events angularjs-components

$broadcast, $emit, and $on are deprecated

Use of the scope/rootScope event bus is deprecated and will make migration to Angular 2+ more difficult.

To facilitate making the transition to Angular 2+ easier, AngularJS 1.5 introduced 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});        };    }});

Usage:

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

The component uses an attribute with AngularJS expression (&) binding that invokes a function in the parent controller. Instead of clogging the scope/rootScope event bus with numerous events, the event goes directly to the function that uses it.

The DEMO

Show code snippet