Какова наилучшая практика/альтернатива использованию $ broadcast/$ on при запуске событий в angularjs?

У меня есть сценарий, где я хочу общаться между диспетчерами-братьями в разных приложениях. Поэтому я создал образец demo, который использует услугу подписчика-издателя для вещания и прослушивания. Но код, подписанный на событие, находится в контроллере. Поэтому я хочу понять, является ли это лучшей практикой? Каков альтернативный способ добиться того же, дайте пример?

Я указал следующий сценарий -
controllerA вещания события и controllerB и controllerC слушать (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 код:

<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, чтобы переместить логику подписки в директиву с параметром оператора «&» 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

Какова наилучшая практика/альтернатива использованию $ broadcast/$ on при запуске событий в angularjs?

ответ

Смежные вопросы