亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

指令之間的AngularJS通信

指令之間的AngularJS通信

繁花如伊 2019-11-14 10:18:40
我是Angular.js的新手,我的應用程序需要指令之間的某些通信,我閱讀了一些有關鏈接和需求的文檔,但無法確切了解其工作原理。對于一個簡單的例子,我有:live小提琴:http : //jsfiddle.net/yw235n98/5/2個指令:firstDir,secondDir ::帶有一些數據firstDir具有單擊功能,它將更改數據值當firsDir單擊功能被觸發時,我也想在secondDir中更改數據。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'        };      });})();
查看完整描述

3 回答

?
弒天下

TA貢獻1818條經驗 獲得超8個贊

在您的示例中,指令結構不是父子結構。因此,您無法通過其控制器共享方法。我會用$rootScope.$broadcast。(請參閱DOCS)


一個指令調用:


$rootScope.$broadcast('someEvent', [1,2,3]);

第二條指令偵聽:


 scope.$on('someEvent', function(event, mass) {

    console.log(mass)}

  );


固定指令:


app.directive("firstDir", function ($rootScope) {

    return {

        restrict: 'E',

        link: function (scope, element, attrs) {

            scope.dataToPass = 'empty';

            scope.doClick = function (valueToPass) {

                scope.dataToPass = valueToPass;

                $rootScope.$broadcast('someEvent', {

                    data: valueToPass

                });

            }

        }

    };

});


app.directive("secondDir", function () {

    return {

        restrict: 'E',

        link: function (scope, element, attrs) {

            scope.receivedData = 'none';


            scope.$on('someEvent', function (event, result) {

                scope.receivedData = result.data;

            });

        }

    }

});


查看完整回答
反對 回復 2019-11-14
?
飲歌長嘯

TA貢獻1951條經驗 獲得超3個贊

我正在使用的是導出指令控制器。假設我有以下指令:


app.directive('mainDirective', function () {

  return {

    require: 'mainDirective'

    restrict: 'E',

    scope: {

      controller: '='

    },

    controller: [

      '$scope',

      function ($scope) {

        // controller methods

        this.doSomething = function () { ... },


        $scope.controller = this

        return this

      }

    ],

    link: function (scope, element, attrs, mainDirective) {

      // some linking stuff

    }

  }

});

我的html看起來像這樣:


<main-directive controller="mainDirective"></main-directive>

<sub-directive main-directive="mainDirective"></sub-directive>

如果我想從子指令控制主指令,我可以輕松地從它的作用域中獲取它并做我想做的任何事情...


app.directive('subDirective', function () {

  return {

    restrict: 'E',

    scope: {

      mainDirective: '='

    }

    link: function (scope, element, attrs) {

      // do something with main directive

      scope.mainDirective.doSomething();

    }

  }

});


查看完整回答
反對 回復 2019-11-14
  • 3 回答
  • 0 關注
  • 677 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號