Який правильний спосіб спілкування між контролерами в AngularJS?

Який правильний спосіб спілкування між контролерами?

Наразі я використовую жахливий фейс, що включає window:

function StockSubgroupCtrl($scope, $http) {
    $scope.subgroups = [];
    $scope.handleSubgroupsLoaded = function(data, status) {
        $scope.subgroups = data;
    }
    $scope.fetch = function(prod_grp) {
        $http.get('/api/stock/groups/' + prod_grp + '/subgroups/').success($scope.handleSubgroupsLoaded);
    }
    window.fetchStockSubgroups = $scope.fetch;
}

function StockGroupCtrl($scope, $http) {
    ...
    $scope.select = function(prod_grp) {
        $scope.selectedGroup = prod_grp;
        window.fetchStockSubgroups(prod_grp);
    }
}

Редагувати : Проблема, адресована у цій відповіді, була вирішена у angular.js версії 1.2.7 . $broadcastтепер уникає барботажу над незареєстрованими областями і працює так само швидко, як $ emit.

Отже, тепер ви можете:

• використання $broadcastвід$rootScope
• слухайте, використовуючи $on місцевих,$scope які повинні знати про подію

Оригінальний відповідь нижче

Я настійно раджу не використовувати $rootScope.$broadcast+, $scope.$onа скоріше $rootScope.$emit+ $rootScope.$on. Перший може спричинити серйозні проблеми з роботою, які піднімає @numan. Це тому, що подія занепаде всіма сферами.

Однак останній (використовуючи $rootScope.$emit+ $rootScope.$on) від цього не страждає і тому може використовуватися як швидкий канал зв'язку!

З кутової документації $emit:

Відправляє ім'я події вгору за допомогою ієрархії діапазону, що сповіщає про зареєстрованих

Оскільки немає сфери вгорі $rootScope, не виникає барботаж. Це абсолютно безпечно для використання $rootScope.$emit()/ $rootScope.$on()як EventBus.

Однак є одна ґутка при використанні її зсередини контролерів. Якщо ви безпосередньо зв’язуєтеся $rootScope.$on()зсередини контролера, вам доведеться очистити прив'язку самостійно, коли ваш локальний файл $scopeбуде знищений. Це тому, що контролери (на відміну від сервісів) можуть отримувати екземпляри кілька разів протягом життя програми, що призведе до прив'язки, підсумовуючи зрештою, створюючи витоки пам'яті в усьому місці :)

Щоб скасувати реєстрацію, просто прослухайте подію вашої $scope, $destroyа потім зателефонуйте до функції, яку повернув $rootScope.$on.

angular
    .module('MyApp')
    .controller('MyController', ['$scope', '$rootScope', function MyController($scope, $rootScope) {

            var unbind = $rootScope.$on('someComponent.someCrazyEvent', function(){
                console.log('foo');
            });

            $scope.$on('$destroy', unbind);
        }
    ]);

Я б сказав, що це насправді не кутова особлива річ, як це стосується й інших реалізацій EventBus, що вам доведеться очищати ресурси.

Однак ви можете полегшити своє життя у цих випадках. Наприклад, ви можете виправити патч мавпи $rootScopeі дати йому $onRootScopeпідписку на події, що випромінюються, $rootScopeале також безпосередньо очищає обробник, коли локальний $scopeзнищується.

Найчистішим способом промацування мавпи $rootScopeнадати такий $onRootScopeметод було б через декоратор (блок запуску, ймовірно, зробить це добре, але pssst, не кажіть нікому)

Для того, щоб переконатися , що $onRootScopeвластивість не проявляється несподіваним при перерахуванні більш $scopeми використовуємо Object.defineProperty()і встановити enumerableна false. Майте на увазі, що вам може знадобитися прокладка ES5.

angular
    .module('MyApp')
    .config(['$provide', function($provide){
        $provide.decorator('$rootScope', ['$delegate', function($delegate){

            Object.defineProperty($delegate.constructor.prototype, '$onRootScope', {
                value: function(name, listener){
                    var unsubscribe = $delegate.$on(name, listener);
                    this.$on('$destroy', unsubscribe);

                    return unsubscribe;
                },
                enumerable: false
            });


            return $delegate;
        }]);
    }]);

За допомогою цього методу замість коду контролера зверху можна спростити:

angular
    .module('MyApp')
    .controller('MyController', ['$scope', function MyController($scope) {

            $scope.$onRootScope('someComponent.someCrazyEvent', function(){
                console.log('foo');
            });
        }
    ]);

Тож як кінцевий результат усього цього я настійно раджу використовувати $rootScope.$emit+ $scope.$onRootScope.

До речі, я намагаюсь переконати команду кутових вирішити проблему в кутовому ядрі. Тут триває дискусія: https://github.com/angular/angular.js/isissue/4574

Ось jsperf, який показує, скільки впливів на парфюмер $broadcastприносить на стіл у пристойному сценарії всього з 100 $scope.

http://jsperf.com/rootscope-emit-vs-rootscope-broadcast

Найголовнішою відповіддю тут було вирішення проблеми з кутом, якої більше не існує (принаймні, у версіях> 1.2.16 та "ймовірно, раніше"), як згадував @zumalifeguard. Але я читаю всі ці відповіді без фактичного рішення.

Мені здається, відповідь зараз має бути

• використання $broadcastвід$rootScope
• слухайте, використовуючи $on місцевих,$scope які повинні знати про подію

Тож опублікувати

// EXAMPLE PUBLISHER
angular.module('test').controller('CtrlPublish', ['$rootScope', '$scope',
function ($rootScope, $scope) {

  $rootScope.$broadcast('topic', 'message');

}]);

І підписуйтесь

// EXAMPLE SUBSCRIBER
angular.module('test').controller('ctrlSubscribe', ['$scope',
function ($scope) {

  $scope.$on('topic', function (event, arg) { 
    $scope.receiver = 'got your ' + arg;
  });

}]);

Плункери

• Регулярний синтаксис $ range (як ви бачите вище)
• новий Controller Asсинтаксис

Якщо ви зареєструєте слухача на локальному рівні $scope, він буде автоматично знищений $destroyсам при видаленні пов'язаного контролера.

Використання $ rootScope. $ Трансляції та $ range. $ On для зв'язку PubSub.

Також дивіться цю публікацію: AngularJS - спілкування між контролерами

Оскільки defineProperty має проблему сумісності браузера, я думаю, що ми можемо подумати про використання сервісу.

angular.module('myservice', [], function($provide) {
    $provide.factory('msgBus', ['$rootScope', function($rootScope) {
        var msgBus = {};
        msgBus.emitMsg = function(msg) {
        $rootScope.$emit(msg);
        };
        msgBus.onMsg = function(msg, scope, func) {
            var unbind = $rootScope.$on(msg, func);
            scope.$on('$destroy', unbind);
        };
        return msgBus;
    }]);
});

і використовувати його в контролері так:

• контролер 1

  function($scope, msgBus) {
      $scope.sendmsg = function() {
          msgBus.emitMsg('somemsg')
      }
  }

• контролер 2

  function($scope, msgBus) {
      msgBus.onMsg('somemsg', $scope, function() {
          // your logic
      });
  }

GridLinked опублікував рішення PubSub, яке, здається, спроектовано досить добре. Сервіс можна знайти тут .

Також схема їх обслуговування:

Насправді використання випромінювання та трансляції неефективне, оскільки подія перетворює вгору та вниз ієрархію сфери, яка може легко погіршитись у розширення продуктивності для складного застосування.

Я б запропонував скористатися послугою. Ось як я нещодавно реалізував це в одному зі своїх проектів - https://gist.github.com/3384419 .

Основна ідея - зареєструвати автобус pubsub / event як послугу. Потім введіть цей автобус подій, куди вам потрібно підписатись або опублікувати події / теми.

Використовуючи методи отримання та встановлення в межах послуги, ви можете легко передавати повідомлення між контролерами.

var myApp = angular.module("myApp",[]);

myApp.factory('myFactoryService',function(){


    var data="";

    return{
        setData:function(str){
            data = str;
        },

        getData:function(){
            return data;
        }
    }


})


myApp.controller('FirstController',function($scope,myFactoryService){
    myFactoryService.setData("Im am set in first controller");
});



myApp.controller('SecondController',function($scope,myFactoryService){
    $scope.rslt = myFactoryService.getData();
});

в HTML HTML ви можете перевірити так

<div ng-controller='FirstController'>  
</div>

<div ng-controller='SecondController'>
    {{rslt}}
</div>

Що стосується оригінального коду - здається, ви хочете поділитися даними між областями. Щоб поділитись Даними або Штатом між областями $, документи пропонують скористатися послугою:

• Для запуску коду без стану або штатного коду, що ділиться між контролерами - замість цього використовуйте кутові служби
• Інстанціювати або керувати життєвим циклом інших компонентів (наприклад, для створення службових примірників).

Ref: Кутове посилання на документи тут

Я фактично почав використовувати Postal.js як шину повідомлень між контролерами.

Це має багато переваг, як шина повідомлень, така як прив'язка стилю AMQP, спосіб поштового зв’язку може інтегрувати w / iFrames та веб-розетки та багато іншого.

Я використовував декоратор, щоб отримати пошту на $scope.$bus...

angular.module('MyApp')  
.config(function ($provide) {
    $provide.decorator('$rootScope', ['$delegate', function ($delegate) {
        Object.defineProperty($delegate.constructor.prototype, '$bus', {
            get: function() {
                var self = this;

                return {
                    subscribe: function() {
                        var sub = postal.subscribe.apply(postal, arguments);

                        self.$on('$destroy',
                        function() {
                            sub.unsubscribe();
                        });
                    },
                    channel: postal.channel,
                    publish: postal.publish
                };
            },
            enumerable: false
        });

        return $delegate;
    }]);
});

Ось посилання на допис у блозі на тему ...
http://jonathancreamer.com/an-angular-event-bus-with-postal-js/

Ось так я це роблю за допомогою Factory / Services та простого введення залежності (DI) .

myApp = angular.module('myApp', [])

# PeopleService holds the "data".
angular.module('myApp').factory 'PeopleService', ()->
  [
    {name: "Jack"}
  ]

# Controller where PeopleService is injected
angular.module('myApp').controller 'PersonFormCtrl', ['$scope','PeopleService', ($scope, PeopleService)->
  $scope.people = PeopleService
  $scope.person = {} 

  $scope.add = (person)->
    # Simply push some data to service
    PeopleService.push angular.copy(person)
]

# ... and again consume it in another controller somewhere...
angular.module('myApp').controller 'PeopleListCtrl', ['$scope','PeopleService', ($scope, PeopleService)->
  $scope.people = PeopleService
]

Мені сподобалось те, як $rootscope.emitвикористовувались для досягнення взаємодії. Я пропоную чисте та ефективне рішення без забруднення глобального простору.

module.factory("eventBus",function (){
    var obj = {};
    obj.handlers = {};
    obj.registerEvent = function (eventName,handler){
        if(typeof this.handlers[eventName] == 'undefined'){
        this.handlers[eventName] = [];  
    }       
    this.handlers[eventName].push(handler);
    }
    obj.fireEvent = function (eventName,objData){
       if(this.handlers[eventName]){
           for(var i=0;i<this.handlers[eventName].length;i++){
                this.handlers[eventName][i](objData);
           }

       }
    }
    return obj;
})

//Usage:

//In controller 1 write:
eventBus.registerEvent('fakeEvent',handler)
function handler(data){
      alert(data);
}

//In controller 2 write:
eventBus.fireEvent('fakeEvent','fakeData');

Ось швидкий і брудний шлях.

// Add $injector as a parameter for your controller

function myAngularController($scope,$injector){

    $scope.sendorders = function(){

       // now you can use $injector to get the 
       // handle of $rootScope and broadcast to all

       $injector.get('$rootScope').$broadcast('sinkallships');

    };

}

Ось приклад функції для додавання до будь-якого з контролерів братів і сестер:

$scope.$on('sinkallships', function() {

    alert('Sink that ship!');                       

});

і звичайно ось ваш HTML:

<button ngclick="sendorders()">Sink Enemy Ships</button>

Починаючи з кутових 1,5, це фокус на розробці, що базується на компонентах. Рекомендований спосіб взаємодії компонентів - через використання властивості "вимагати" та через прив'язку властивостей (введення / виводу).

Для компонента знадобиться інший компонент (наприклад, кореневий компонент) та отримати посилання на його контролер:

angular.module('app').component('book', {
    bindings: {},
    require: {api: '^app'},
    template: 'Product page of the book: ES6 - The Essentials',
    controller: controller
});

Потім можна використовувати методи кореневого компонента у вашому дочірньому компоненті:

$ctrl.api.addWatchedBook('ES6 - The Essentials');

Це функція контролера кореневого компонента:

function addWatchedBook(bookName){

  booksWatched.push(bookName);

}

Ось повний огляд архітектури: Компонентна комунікація

Ви можете отримати доступ до цієї привітної функції в будь-якому місці модуля

Контролер один

 $scope.save = function() {
    $scope.hello();
  }

другий контролер

  $rootScope.hello = function() {
    console.log('hello');
  }

Більше інформації тут

Я буду створювати сервіс і використовувати сповіщення.

1. Створіть метод у Службі сповіщень
2. Створіть загальний метод для трансляції сповіщень у Службі сповіщень.
3. З контролера джерела виклик notificationService.Method. Я також передаю відповідний об'єкт для збереження, якщо це потрібно.
4. У рамках методу я зберігаю дані в службі сповіщень та загальноприйнятий спосіб повідомлення.
5. У контролері призначення я слухаю ($ range.on) для трансляції події та доступу до даних Служби сповіщень.

Оскільки в будь-якій точці Служба сповіщень є однотонною, вона повинна мати можливість надавати постійні дані по всій.

Сподіваюсь, це допомагає

Ви можете використовувати вбудований сервіс AngularJS $rootScopeі вводити цю послугу в обидва контролери. Потім ви можете слухати події, запущені на об’єкт $ rootScope.

$ rootScope пропонує два диспетчера подій, які називаються, $emit and $broadcastякі відповідають за диспетчеризацію подій (можуть бути спеціальні події) та використовують $rootScope.$onфункцію для додавання слухача подій.

Вам слід скористатися Сервісом, оскільки $rootscopeце доступ із усієї Додатку, і це збільшує навантаження, або ви можете користуватися рутними параметрами, якщо ваших даних не більше.

function mySrvc() {
  var callback = function() {

  }
  return {
    onSaveClick: function(fn) {
      callback = fn;
    },
    fireSaveClick: function(data) {
      callback(data);
    }
  }
}

function controllerA($scope, mySrvc) {
  mySrvc.onSaveClick(function(data) {
    console.log(data)
  })
}

function controllerB($scope, mySrvc) {
  mySrvc.fireSaveClick(data);
}

Ви можете зробити це, використовуючи кутові події, що є $ emit та $ широкомовна трансляція. Згідно з нашими знаннями, це найкращий, ефективний та ефективний спосіб.

Спочатку ми викликаємо функцію від одного контролера.

var myApp = angular.module('sample', []);
myApp.controller('firstCtrl', function($scope) {
    $scope.sum = function() {
        $scope.$emit('sumTwoNumber', [1, 2]);
    };
});
myApp.controller('secondCtrl', function($scope) {
    $scope.$on('sumTwoNumber', function(e, data) {
        var sum = 0;
        for (var a = 0; a < data.length; a++) {
            sum = sum + data[a];
        }
        console.log('event working', sum);

    });
});

Ви також можете використовувати $ rootScope замість $ range. Використовуйте відповідний контролер відповідно.