Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is good Demo in <kbd><a href="http://jsfiddle.net/simpulton/GeAAB/">Fiddle</a></kbd> how to use shared service in directive and other controllers through <code>$scope.$on</code></p> <p><strong>HTML</strong></p> <pre><code>&lt;div ng-controller="ControllerZero"&gt; &lt;input ng-model="message" &gt; &lt;button ng-click="handleClick(message);"&gt;BROADCAST&lt;/button&gt; &lt;/div&gt; &lt;div ng-controller="ControllerOne"&gt; &lt;input ng-model="message" &gt; &lt;/div&gt; &lt;div ng-controller="ControllerTwo"&gt; &lt;input ng-model="message" &gt; &lt;/div&gt; &lt;my-component ng-model="message"&gt;&lt;/my-component&gt; </code></pre> <p><strong>JS</strong></p> <pre><code>var myModule = angular.module('myModule', []); myModule.factory('mySharedService', function($rootScope) { var sharedService = {}; sharedService.message = ''; sharedService.prepForBroadcast = function(msg) { this.message = msg; this.broadcastItem(); }; sharedService.broadcastItem = function() { $rootScope.$broadcast('handleBroadcast'); }; return sharedService; }); </code></pre> <p>By the same way we can use shared service in directive. We can implement controller section into directive and use <code>$scope.$on</code></p> <pre><code>myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '&lt;input&gt;' }; }); </code></pre> <p>And here three our controllers where <code>ControllerZero</code> used as trigger to invoke <code>prepForBroadcast</code></p> <pre><code>function ControllerZero($scope, sharedService) { $scope.handleClick = function(msg) { sharedService.prepForBroadcast(msg); }; $scope.$on('handleBroadcast', function() { $scope.message = sharedService.message; }); } function ControllerOne($scope, sharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'ONE: ' + sharedService.message; }); } function ControllerTwo($scope, sharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'TWO: ' + sharedService.message; }); } </code></pre> <p>The <code>ControllerOne</code> and <code>ControllerTwo</code> listen <code>message</code> change by using <code>$scope.$on</code> handler.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload