Автоматически обновлять переменную id в двух контроллерах, используя $broadcast в AngularJS

Question

Автоматически обновлять переменную id в двух контроллерах, используя $broadcast в AngularJS

$ctrl.clicker = function(id)
{
   $rootScope.$broadcast('idBull', id);
}

Когда я вводю изображение мышью, вызывается указанная выше функция. Я хочу поделиться идентификатором в другом контроллере и передать все изменения, которые были внесены в этот идентификатор.

$scope.$on('idBull', function (event, data) {
  console.log(data); // 'Data to send'
});

В другом контроллере я использовал код для создания консольного лога моего идентификатора, но не получил результатов.

0

angularjs broadcast

Источник

user9040462 08 дек '17 в 21:59

2 ответа

Другие вопросы по тегам angularjs broadcast

user8952488 09 дек '17 в 00:41 2017-12-09 00:41 · Answer 1 · 2017-12-09 00:41

Не уверен, почему ваш код не работает, возможно, контроллер с $scope.$on не создается / загружается, когда $rootScope.$broadcast выполняется?

Другое решение состоит в том, чтобы использовать сервис, который вы вводите в оба контроллера, и вместо этого использовать его для связи. Пример широковещательного решения:

var app = angular.module("app", [])
.controller("ControllerA", function($scope, $rootScope)
{
    $scope.clicker = function(id)
    {
        $rootScope.$broadcast("id changed", id);
    }
})
.controller("ControllerB", function($scope)
{
    $scope.$on("id changed", function(event, id)
    {
        // Do whatever you need to do with id
    });
});

Пример решения с индивидуальным сервисом:

var app = angular.module("app", [])
.factory("customService", function()
{
    var callbacks = [];

    return {
        onIdChange: function(callback)
        {
            callbacks.push(callback);
        },
        idChanged: function(id)
        {
            callbacks.forEach(function(callback)
            {
                callback(id);
            });
        }
    };
})
.controller("ControllerA", function($scope, customService)
{
    $scope.clicker = function(id)
    {
        customService.idChanged(id);
    }
})
.controller("ControllerB", function(customService)
{
    customService.onIdChange(function(id)
    {
        // Do whatever you need to do with id
    });
});

user8101253 08 дек '17 в 22:09 2017-12-08 22:09 · Answer 2 · 2017-12-08 22:09

http://jsfiddle.net/87rLob9x/ Проверьте эту скрипку, надеюсь, это поможет HTML

<html ng-app="myApp">
<div ng-controller='ControllerA'>

    <button ng-click='add()'>Add</button
</div>
<div ng-controller='ControllerB'>
    {{ increment }}

</div>

</html>

ЯШ:

var app = angular.module('myApp', [])
.controller('ControllerA', function($scope) {
    $scope.increment = 0;
    $scope.add = function() {
        $scope.$broadcast('hasIncremented');
    }

}).
controller('ControllerB', function($scope) {
    $scope.$on('hasIncremented', function(event) {
        $scope.increment++; 
    });
})