个人中心
gpt4 book ai didi

javascript - AngularJS 指令之间的通信

转载 作者：行者123 更新时间：2023-12-03 01:09:42 24 4
gpt4 key购买 nike

我是 Angular.js 的新手，我的应用程序需要在指令之间进行一些通信，我阅读了一些有关 link 和 require 的文档，但无法准确理解它是如何工作的。

举个简单的例子，我有:live fiddle : http://jsfiddle.net/yw235n98/5/

  • 2 个指令:firstDir、secondDir::以及一些数据
  • firstDir有一个点击函数，会改变数据值
  • 当 firsDir 点击函数被触发时，我也想更改 secondaryDir 中的数据。

HTML:

<body ng-app="myApp">
First Directive :   
<first-dir >
    <h3>{{firstCtrl.data}}</h3>
    <button ng-click="firstCtrl.set('NEW VALUE')">Change Value</button>
</first-dir>
Second Directive : 
<second-dir>
    <h3>{{secondCtrl.data}}</h3>
</second-dir>

Javascript: 

(function(){
    var app = angular.module('myApp', []);

    app.directive("firstDir", function(){
        return {
            restrict : 'E',
            controller : function(){        
                this.data = 'init value';
                this.set = function(value){
                    this.data = value;
                    // communication with second Directive ???
                }       
            },
            controllerAs : 'firstCtrl'
        };  
    });

    app.directive("secondDir", function(){
        return {
            restrict : 'E',
            controller : function(){        
                this.data = 'init value';   
            },
            controllerAs : 'secondCtrl'
        };  
    });
})();

最佳答案

使用所谓的事件在它们之间进行通信的一种方法。

一个指令可以在根作用域上发出一个事件，然后任何想要的人都可以监听该事件。您可以使用 $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'
    };  
});

Demo Demo2

_____________________________________________________________________________

现在说到这一点，有时确实需要注入(inject) $rootScope 只是为了将事件启用到应用程序中的不同节点。相反，您可以在应用程序中轻松构建发布/订阅机制并利用原型(prototype)继承。

在这里，我在应用初始化期间在 $rootScope's 原型(prototype)上添加了 2 个方法 publish 和 subscribe。因此，任何子作用域或隔离作用域都将具有可用的这些方法，并且通信将变得更加容易，而无需担心是否使用 $emit、$broadcast，是否需要注入(inject)$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 或 $emit 或 $broadcast:-

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

<强> Demo - PubSub

关于javascript - AngularJS 指令之间的通信，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25274563/

24 4 0
文章推荐： Django:get_object_or_404不是正确的解决方案，但什么是？
文章推荐： javascript - 如何理解 snap.svg 中的 Transform 属性？
文章推荐： ruby-on-rails - Rails 3.1 CKEditor gem 原始文本
文章推荐： command-line-arguments - 如何访问 Nim 中的命令行参数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com