在angularjs中觸發事件時使用$ broadcast/$ on的最佳做法/替代方法是什麼？

我有我想在不同應用程序中的兄弟控制器之間進行通信的場景。所以我創建了示例demo，它使用發佈者訂戶服務來廣播和監聽事件。但訂閱該事件的代碼位於控制器中。所以我想了解這是否是最佳做法？什麼是實現這一目標的替代方法，舉例說明？

我指出以下情形 -
controllerA廣播事件和controllerB和controllerC聽它（1-多）

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代碼：

<body class='container'> 
    <div ng-controller="controllerA"> 
    <input data-ng-model="teamName" type="text" data-ng-change="changeTeam()" />  
    </div> 
    <div ng-controller="controllerB">controllerB - You typed: {{team}} 
    <br /> 
    </div> 
    <div ng-controller="controllerC">controllerC - You typed:{{team}}</div> 
</body>

來源

2016-05-25 Sumit Deshpande

分析我後拿出以下solution將訂閱邏輯移動到帶有「&」操作符參數的指令th at允許調用或評估父範圍上的表達式/函數，並將控制器代碼降至最低。因爲99％的時間將東西傾倒到控制器上是一個糟糕的主意。除非它是範圍變量或手錶，否則很可能將其抽象爲其他內容。

通過實現這種方式，我們可以使代碼可重用，可測試和模塊化。

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代碼

<div ng-controller="controllerB"> 
    <on-change-name on-name-change-callback="callbackNameChanged(message)"></on-change-name> 
    controllerB - You typed: {{team}} 
    <br /> 
</div> 
<div ng-controller="controllerC"> 
    <on-change-name on-name-change-callback="callbackNameChanged(message)"></on-change-name> 
    controllerC - You typed:{{team}} 
</div>

來源

2016-05-27 06:28:35

在angularjs中觸發事件時使用$ broadcast/$ on的最佳做法/替代方法是什麼？

回答

相關問題