What is best practice/alternative to use $broadcast/$on in triggering events in angularjs? -
i have scenario want communicate between sibling controllers in different apps. created sample demo uses publisher-subscriber service broadcast , listen event. code subscribing event in controller. want understand whether best practice? alternative way achieve same, give example?
indicated following scenario –
controllera broadcast event , controllerb , controllerc listen (1-many)
var app = angular.module('app', []); app.controller('controllera', ['$scope', 'pubsubservice', controllera]); function controllera($scope, pubsubservice) { $scope.teamname = ''; $scope.changeteam = function() { pubsubservice.publish("changenameevent", { filterteam: $scope.teamname }); }; } app.controller('controllerb', ['$scope', 'pubsubservice', controllerb]); function controllerb($scope, pubsubservice) { var callbacknamechanged = function(message) { $scope.team = message.filterteam }; pubsubservice.subscribe("changenameevent", $scope, callbacknamechanged); } app.controller('controllerc', ['$scope', 'pubsubservice', controllerc]); function controllerc($scope, pubsubservice) { var callbacknamechanged = function(message) { $scope.team = message.filterteam }; pubsubservice.subscribe("changenameevent", $scope, callbacknamechanged); } app.factory("pubsubservice", ["$rootscope", function($rootscope) { var publish = function(message, item) { try { $rootscope.$broadcast(message, { item: item }) } catch (e) { console.log(e.message) } }; var subscribe = function(message, $scope, handler) { try { $scope.$on(message, function(event, args) { handler(args.item) }) } catch (e) { console.log(e.message) } }; return { publish: publish, subscribe: subscribe } }]); html code:
<body class='container'> <div ng-controller="controllera"> <input data-ng-model="teamname" type="text" data-ng-change="changeteam()" /> </div> <div ng-controller="controllerb">controllerb - typed: {{team}} <br /> </div> <div ng-controller="controllerc">controllerc - typed:{{team}}</div> </body>
after analysis come following solution move subscription logic directive "&" operator parameter allows invoke or evaluate expression/function on parent scope , keep controller code minimum. dumping things onto controller bad idea 99% of time. unless it's scope variable or watch can abstract else.
by implementing way can make code reusable, testable , modular.
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 code
<div ng-controller="controllerb"> <on-change-name on-name-change-callback="callbacknamechanged(message)"></on-change-name> controllerb - typed: {{team}} <br /> </div> <div ng-controller="controllerc"> <on-change-name on-name-change-callback="callbacknamechanged(message)"></on-change-name> controllerc - typed:{{team}} </div> 
Comments
Post a Comment