栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

指令之间的AngularJS通信

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

指令之间的AngularJS通信

您可以使用事件方法在它们之间进行通信的一种方式。

一个指令可以在rootscope上发出事件,然后任何人都可以侦听。您可以使用

$rootScope.$emit
$rootScope.$broadcast
发布带有数据的事件,并用于
$scope.$on
监听事件。就您而言,您也可以这样做
$scope.$emit

app.directive("firstDir", function(){    return {        restrict : 'E',        controller : function($scope){         this.data = 'init value'; this.set = function(value){  //EMIT THE EVENT WITH DATA   $scope.$emit('FIRST_DIR_UPDATED', value);     this.data = value;     // communication with second Directive ??? }    },        controllerAs : 'firstCtrl'    };  });app.directive("secondDir", function(){    return {        restrict : 'E',        controller : function($scope){   var _that = this;          //LISTEN TO THE EVENT$scope.$on('FIRST_DIR_UPDATED', function(e, data){      _that.data = data;          });          this.data = 'init value';},        controllerAs : 'secondCtrl'    };  });

演示
DEMO2

________________

现在讲,有时确实需要注入

$rootScope
只是为了将事件启用到应用程序中的其他节点。相反,您可以在您的应用程序中轻松构建一个发布/订阅机制,并利用原型继承。

在这里,我将在应用初始化期间添加2种方法

publish
subscribe
$rootScope's
原型上。所以,任何儿童范围或隔离的范围将这些方法可用,沟通会更容易因此无需担心是否使用
$emit
$broadcast
我是否需要注入
$rootscope
从隔离范围的指令等进行通信

app.service('PubSubService', function () {   return {Initialize:Initialize};     function Initialize (scope) {        //Keep a dictionary to store the events and its subscriptions        var publishEventMap = {};         //Register publish events          scope.constructor.prototype.publish =  scope.constructor.prototype.publish || function () {     var _thisScope = this,         handlers,          args,          evnt;     //Get event and rest of the data     args = [].slice.call(arguments);     evnt = args.splice(0, 1);     //Loop though each handlerMap and invoke the handler     angular.forEach((publishEventMap[evnt] || []), function (handlerMap) {         handlerMap.handler.apply(_thisScope, args);     }) }         //Register Subscribe events         scope.constructor.prototype.subscribe = scope.constructor.prototype.subscribe  || function (evnt, handler) {     var _thisScope = this,         handlers = (publishEventMap[evnt] = publishEventMap[evnt] || []);     //Just keep the scopeid for reference later for cleanup     handlers.push({ $id: _thisScope.$id, handler: handler });   //When scope is destroy remove the handlers that it has subscribed.    _thisScope.$on('$destroy', function () {     for(var i=0,l=handlers.length; i<l; i++){       if (handlers[i].$id === _thisScope.$id) {  handlers.splice(i, 1);  break;         }     } });        }    }}).run(function ($rootScope, PubSubService) {    PubSubService.Initialize($rootScope);});

而且您可以在应用程序中的任何位置发布事件而无需rootScope。

$scope.publish('eventName', data);

并在应用程序的任何地方收听,而无需担心使用

$rootScope
or
$emit
$broadcast
:-

$scope.subscribe('eventName', function(data){    //do somthing});

演示-PubSub



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/636141.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号