AngularJS - bir modülden diğerine olay gönderme; Gerçekten işe yarıyor mu?

Bir açısal modülden diğerine bir olay göndermek için bir çözüme ihtiyacım var. Ancak, geniş prototip sonra bu gerçekten çalışıyor emin değilim How to send message from one module to another?AngularJS - bir modülden diğerine olay gönderme; Gerçekten işe yarıyor mu?

Michael G. tarafından: ben bunu istiyorum tam olarak nasıl bir çözüm açıklanır burada Konuyu buldum. Özetle, iki yöntem içeren bir hizmeti gösterir: biri olayı göndermek için (gönderen tarafından aranır), diğeri alıcının olayı değiştirmek üzere tetiklenecek bir geri çağırma ile kayıt yaptırabileceği bir.

Herkes çalışma örneği verebilir mi?

kaynak

2016-04-14 R.Pieterse

Bu Works:

HTML

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <p>Hello {{name}}!</p> 
    <m1></m1> 
    <m2></m2> 
    </body> 

</html>

JavaScript

angular.module('commoncore',[]).factory('NotifyService', function($rootScope) { 
    return { 
    onSomethingChanged: function(scope, callback) { 
     var handler = $rootScope.$on('event:NotifyService.SomethingChanged', callback); 
     scope.$on('$destroy', handler); 
    }, 
    raiseSomethingChanged: function() { 
     $rootScope.$emit('event:NotifyService.SomethingChanged'); 
    } 
    }; 
}); 

angular.module('module1', ['commoncore']).directive('m1', [function() { 
    return { 
    restrict: 'E', 
    template: '<div>{{vm1.name}}</div>', 
    controllerAs: 'vm1', 
    controller: ['$scope','NotifyService',function($scope,NotifyService) { 
     this.name = 'm1'; 
     $scope.vm = this; 
     NotifyService.onSomethingChanged($scope, function somethingChanged() { 
     $scope.vm.name = 'm1 changed'; 
     console.log("M1 Changed"); 
     }); 
    }] 
    } 
}]); 
angular.module('module2', ['commoncore']).directive('m2', [function() { 
    return { 
    restrict: 'E', 
    template: '<div>{{vm2.name}} <button ng-click="vm2.DoSomething()">Change M1</button></div>', 
    controllerAs: 'vm2', 
    controller: ['NotifyService',function(NotifyService) { 
     this.name = 'm2'; 
     this.DoSomething = function() { 
     NotifyService.raiseSomethingChanged(); 
     }; 
    }] 
    } 
}]); 

var app = angular.module('plunker', ['module1','module2']); 


app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
});

Demo: http://plnkr.co/edit/WDd8sKjJTlKpMvMCsizJ?p=preview

kaynak

2016-04-15 00:00:51 sreeramu

Bu mükemmel çalışır ama 2 diğer modülleri enjekte tek uygulamadır. Daha ayrık bir yaklaşım istiyorum: 2 modül, plunker modülünü enjekte ediyor ... Mümkün mü? Bu kapsamı/kökünü paylaşabilecekler mi? –

@ R.Pieterse Bu noktayı alamıyorum "plunker modülünü enjekte eden 2 modül ... Bu mümkün mü?" – sreeramu

Kötü, commoncore modülünü kastettim. : -S İlk sorumu açıkladığım örnekte olduğu gibi, 'gönderenin' ve olayın 'alıcısı' nın da ortak hizmetin enjekte edilmesini istiyorum. Gerçek hayatta kendi uyguladığım 'alıcı', ancak 'gönderen' ve ortak hizmet benim maalesef kontrolüm dışında. Bu nedenle, commoncore hizmetinin diğer modüller hakkında agnostik olmasını istiyorum. –

AngularJS - bir modülden diğerine olay gönderme; Gerçekten işe yarıyor mu?

cevap

İlgili konular