angularjsのイベントをトリガする際に$ broadcast/$ onを使用するベストプラクティス/代替方法は何ですか？

私は、さまざまなアプリケーションの兄弟コントローラ間で通信したいというシナリオを持っています。だから私はブロードキャストとリッスンのイベントにpublisher-subscriberサービスを使用するサンプル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

分析した後、I 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を使用するベストプラクティス/代替方法は何ですか？

答えて

関連する問題