AngularJS'deki kontrolörler arasında iletişim kurmanın doğru yolu nedir?

Kontrolörler arasında iletişim kurmanın doğru yolu nedir?

Şu anda aşağıdakileri içeren korkunç bir şekerleme kullanıyorum 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);
    }
}

Düzenleme : Bu yanıtta ele alınan sorun angular.js sürüm 1.2.7'de giderilmiştir . $broadcastşimdi kayıt dışı kapsamlar üzerinde kabarcık oluşmasını önler ve $ emit kadar hızlı çalışır.

Şimdi şunları yapabilirsiniz:

• kullanmak $broadcastgelen$rootScope
• etkinlik hakkında bilmeniz gereken $on yerelden$scope kullanarak dinleyin

Aşağıda Orijinal Yanıt

Çok kullanmamayı tavsiye $rootScope.$broadcast+ $scope.$onziyade ancak $rootScope.$emit+ $rootScope.$on. Birincisi @ insan tarafından ortaya konulduğu gibi ciddi performans sorunlarına neden olabilir. Bunun nedeni, olayın tüm kapsamlar boyunca patlayacağıdır.

Ancak, ikincisi ( $rootScope.$emit+ kullanarak $rootScope.$on) bundan muzdarip değildir ve bu nedenle hızlı bir iletişim kanalı olarak kullanılabilir!

Açısal dokümanlarından $emit:

Kayıtlıyı bildiren kapsam hiyerarşisinde yukarı doğru bir olay adı gönderir

Yukarıda bir kapsam $rootScopeolmadığından, kabarcıklanma olmaz. EventBus olarak $rootScope.$emit()/ kullanmak tamamen güvenlidir $rootScope.$on().

Ancak, Kontrolörler içinden kullanırken bir tane var. $rootScope.$on()Bir denetleyiciden doğrudan bağlanırsanız , $scopeyereliniz yok edildiğinde bağlamayı kendiniz temizlemeniz gerekir . Bunun nedeni, denetleyicilerin (hizmetlerin aksine), uygulamanın ömrü boyunca birden çok kez örneklenebilmesidir;

Unregister için, sadece dinlemek $scopebireyin $destroyolay ve o sırada döndürüldü işlevini çağırmak $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);
        }
    ]);

Diğer EventBus uygulamaları için de geçerli olduğu için gerçekten açısal bir şey değil, kaynakları temizlemeniz gerektiğini söyleyebilirim.

Ancak, olabilir bu durumlar için hayatınızı kolaylaştıracak. Örneğin, maymun yaması $rootScopeverebilir ve ona $onRootScopeyayılan olaylara abone olan, $rootScopeancak yerel $scopeimha edildiğinde doğrudan işleyiciyi temizleyen bir öğe verebilirsiniz .

$rootScopeBöyle bir $onRootScopeyöntemi sağlamak için maymun yamasının en temiz yolu bir dekoratör aracılığıyla olacaktır (bir çalışma bloğu muhtemelen iyi de yapar, ancak pssst, kimseye söyleme)

Emin olmak için $onRootScopeüzerinde numaralandırılıyor mülkiyet beklenmedik görünmüyor $scopekullandığımız Object.defineProperty()ve set enumerableiçin false. Bir ES5 şimine ihtiyacınız olabileceğini unutmayın.

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;
        }]);
    }]);

Bu yöntem uygulandığında, yukarıdan kontrolör kodu basitleştirilebilir:

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

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

Tüm bunların nihai sonucu olarak $rootScope.$emit+ kullanmanızı şiddetle tavsiye ederim $scope.$onRootScope.

Btw, açısal ekibi problemi açısal çekirdek içinde ele almaya ikna etmeye çalışıyorum. Burada bir tartışma var: https://github.com/angular/angular.js/issues/4574

İşte sadece 100'lerle $broadcastiyi bir senaryoda mükemmel bir etkinin ne kadarını masaya getirdiğini gösteren bir jsperf $scope.

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

Buradaki en iyi yanıt , @zumalifeguard'ın belirttiği gibi artık var olmayan (en azından> 1.2.16 ve "muhtemelen daha önce" sürümlerinde) bir Açısal problemden kaynaklanıyordu. Ama tüm bu cevapları gerçek bir çözüm olmadan okudum.

Bana öyle geliyor ki cevap şimdi olmalı

• kullanmak $broadcastgelen$rootScope
• etkinlik hakkında bilmeniz gereken $on yerelden$scope kullanarak dinleyin

Yayınlamak için

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

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

}]);

Ve abone olun

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

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

}]);

Plunkers

• Düzenli $ kapsam sözdizimi (yukarıda gördüğünüz gibi)
• yeni Controller Assözdizimi

Yerel üzerinde dinleyici kayıt varsa $scope, bu edilecektir tarafından otomatik tahrip $destroykendisi ilişkili kontrolör kaldırıldığında.

Kullanılması $ rootScope. $ Yayını ve $ kapsamını. Bir PubSub iletişim için üzerinde $.

Ayrıca, bu gönderiye bakın: AngularJS - Denetleyiciler Arasında İletişim Kurma

DefineProperty'nin tarayıcı uyumluluk sorunu olduğundan, bir hizmet kullanmayı düşünebiliriz.

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;
    }]);
});

ve denetleyicide şöyle kullanın:

• denetleyici 1

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

• kontrolör 2

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

GridLinked oldukça iyi tasarlanmış bir PubSub çözümü yayınladı . Hizmet burada bulunabilir .

Ayrıca hizmetlerinin bir diyagramı:

Gerçekte emit ve broadcast kullanmak verimsizdir çünkü olay, karmaşık bir uygulama için kolayca performans düşüşüne dönüşebilen kapsam hiyerarşisini yukarı ve aşağı kabarcıklar.

Bir hizmet kullanmanızı öneririm. Kısa bir süre önce projelerimden birine nasıl uyguladığım - https://gist.github.com/3384419 .

Temel fikir - pubsub / event bus'ı hizmet olarak kaydedin. Ardından, olay / konulara abone olmanız veya yayınlamanız gereken yere o olayı enjekte edin.

Bir hizmet içindeki alma ve ayarlama yöntemlerini kullanarak denetleyiciler arasında iletileri kolayca iletebilirsiniz.

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'de böyle kontrol edebilirsiniz

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

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

Orijinal kodla ilgili olarak - kapsamlar arasında veri paylaşmak istediğiniz anlaşılıyor. Verileri veya Durumu $ kapsamı arasında paylaşmak için dokümanlar bir hizmet kullanmanızı önerir:

• Denetleyiciler arasında paylaşılan durum bilgisi olmayan veya durum bilgisi olan kod çalıştırmak için - Bunun yerine açısal servisleri kullanın.
• Diğer bileşenlerin yaşam döngüsünü başlatmak veya yönetmek için (örneğin, hizmet örnekleri oluşturmak için).

Ref: Açısal Dokümanlar bağlantısı

Aslında Postal.js'yi denetleyiciler arasında bir mesaj veri yolu olarak kullanmaya başladım.

AMQP tarzı bağlamalar, postaların w / iFrame'leri ve web soketlerini entegre edebilme şekli ve daha pek çok şey gibi birçok faydası vardır.

Posta ayarlamak için bir dekoratör kullandım $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;
    }]);
});

İşte konuyla ilgili bir blog yazısı bağlantısı ...
http://jonathancreamer.com/an-angular-event-bus-with-postal-js/

Fabrika / Hizmetler ve basit bağımlılık enjeksiyonu (DI) ile böyle yapıyorum .

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
]

Ben iletişim $rootscope.emitkurmak için nasıl kullanıldığını sevdim . Küresel alanı kirletmeden temiz ve performans etkin bir çözüm öneriyorum.

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');

İşte hızlı ve kirli yol.

// 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');

    };

}

Kardeş denetleyicilerin herhangi birine eklenecek örnek bir işlev şunlardır:

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

    alert('Sink that ship!');                       

});

ve elbette HTML kodunuz:

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

Açısal 1.5 ve bileşen tabanlı geliştirme odağı. Bileşenlerin etkileşime girmesi için önerilen yol 'requir' özelliğinin kullanılması ve özellik bağlamaları (giriş / çıkış) kullanmaktır.

Bir bileşen başka bir bileşen (örneğin kök bileşen) gerektirir ve denetleyicisine bir başvuru alır:

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

Ardından, alt bileşeninizdeki kök bileşenin yöntemlerini kullanabilirsiniz:

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

Bu, kök bileşen denetleyici işlevidir:

function addWatchedBook(bookName){

  booksWatched.push(bookName);

}

İşte tam bir mimari genel bakış: Bileşen İletişimi

Bu merhaba işlevine modülün herhangi bir yerinden erişebilirsiniz

Birinci denetleyici

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

ikinci kontrolör

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

Daha fazla bilgi burada

Bir hizmet oluşturacağım ve bildirim kullanacağım.

1. Bildirim Hizmetinde yöntem oluşturma
2. Bildirim Hizmeti'nde bildirim yayınlamak için genel bir yöntem oluşturun.
3. Kaynak denetleyicisinden messageService.Method öğesini arayın. Ayrıca gerekirse devam etmek için ilgili nesneyi iletmek.
4. Bu yöntemde, bildirim hizmetindeki verileri saklıyorum ve genel bildirim yöntemini çağırıyorum.
5. Hedef denetleyicide yayın olayını dinlerim ($ scope.on) ve Bildirim Hizmetinden verilere erişirim.

Herhangi bir noktada Bildirim Hizmeti tekil olduğu için, sürekli veri sağlayabilmelidir.

Bu yardımcı olur umarım

AngularJS yerleşik hizmetini kullanabilirsiniz $rootScope ve bu hizmeti her iki denetleyicinize de enjekte edebilirsiniz. Daha sonra $ rootScope nesnesinde tetiklenen olayları dinleyebilirsiniz.

$ rootScope, olayların gönderilmesinden $emit and $broadcastsorumlu olan (özel olaylar olabilir) ve $rootScope.$onolay dinleyicisi eklemek için işlevi kullanan iki olay dağıtıcı sağlar .

$rootscopeTüm Uygulamadan erişim olduğu için Hizmeti kullanmalısınız ve yükü artırır veya verileriniz daha fazla değilse rootparamları kullanırsınız.

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 ve $ broadcast gibi açısal olayları kullanarak yapabilirsiniz. Bildiğimiz kadarıyla bu en iyi, verimli ve etkili yoldur.

İlk önce bir kontrol cihazından bir fonksiyon çağırıyoruz.

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

    });
});

$ Kapsamı yerine $ rootScope da kullanabilirsiniz. Denetleyicinizi buna göre kullanın.