Was ist Best Practice/Alternative zur Verwendung von $ broadcast/$ bei der Auslösung von Events in angularjs?

Ich habe Szenario, wo ich zwischen Geschwistersteuerungen in verschiedenen Apps kommunizieren möchte. So habe ich Beispiel demo erstellt, das Publisher-Subskribenten-Dienst zum Senden und Abhören von Ereignissen verwendet. Der Code, der das Ereignis abonniert, befindet sich jedoch im Controller. Also ich möchte verstehen, ob dies eine Best Practice ist? Was ist der alternative Weg, um dasselbe zu erreichen, geben Sie ein Beispiel?

ich folgendes Szenario gezeigt -
controllerA Broadcast-Ereignis und controllerB und controllerC es (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 hören:

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

Quelle

2016-05-25 Sumit Deshpande

Nach der Analyse I kommen Sie mit folgenden solution vor, um die Subskriptionslogik in eine Anweisung mit dem Operatorparameter "&" zu versetzen at ermöglicht das Aufrufen oder Auswerten eines Ausdrucks/einer Funktion im übergeordneten Bereich und hält den Controller-Code auf einem Minimum. Es ist in 99% der Fälle eine schlechte Idee, Dinge auf den Controller zu werfen. Wenn es sich nicht um eine Bereichsvariable oder eine Uhr handelt, können Sie es höchstwahrscheinlich in etwas anderes abstrahieren.

Durch die Implementierung dieser Methode können wir Code wiederverwendbar, testbar und modular machen.

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

Quelle

2016-05-27 06:28:35

Was ist Best Practice/Alternative zur Verwendung von $ broadcast/$ bei der Auslösung von Events in angularjs?

Antwort

Verwandte Themen