Angular指令 - 需要從指令控制器訪問所需的控制器

Question

我正在寫一個角度「tab」指令，它需要通過向父級發送對自身的引用來與父級「tabs」指令進行通信。

我想保持我的代碼在指令的控制器，而不是鏈接功能，因爲我沒有真正做任何與DOM。

的問題是，如果我使用{要求：「^標籤」}我可以得到所需要的指令的控制器的複製這樣的..

link: function(scope, element, attr, ctrls) { 
    var controller = ctrls[0]; 
} 

，但我會怎麼做這個指令的控制器內功能？

Answer 1

這對我來說總是一個有趣的問題。我喜歡以我對這個常見案例的解決方案來玩弄狂野的一面。

首先，我退後一步，給controllerAs查看語法的角度風格指南（https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#controlleras-controller-syntax）

建議使用此語法，你可以定義你的指令爲：

var directive = { 
     require: '^myParentDirective', 
     restrict: 'EA', 
     controller: 'MyController as myCtrl', 
     templateUrl: 'super/awesome/app/my/my.directive.html', 
     scope: { 
      myProp: '=' 
     }, // isolate scope 
     link: link 
    }; 

    function link(scope, element, attr, myParentCtrl) { 

     scope.myCtrl.myParent = myParentCtrl; 

    } 

漁獲（總是有一個問題）：

請記住，指令的控制器是在鏈接函數被調用之前構造的。所以你不能指望myParent屬性在控制器構建期間執行的代碼中被解析。

function MyController($scope) { 

    var _self = this; 

    _self.myParent.register(_self); // myParent is not defined 

} 

而是等到你確信myParent解決

function MyController(scope) { 

    var _self = this; 

    _self.initialize = initialize; 

    return; 

    function initialize() { 

     _self.myParent.register(_self); // myParent might be defined 

    } 

} 

然後像做

function link(scope, element, attr, myParentCtrl) { 

    scope.myCtrl.myParent = myParentCtrl; 

    scope.myCtrl.initialize(); 

} 

讓我知道如果這能幫助，大錯特錯，或者如果您需要更多澄清。

（另外，請原諒語法錯誤）

Answer 2

一般來說，如果你需要共享控制器之間的數據，你可以創建一個工廠/服務來存儲數據，並在這些控制器注入服務。該服務中設置的數據將是單身人士。

angular.module('myApp', []) 
    .factory('myService', function() { 
    var myData; 
    return { 
     getData: function() { 
     return this.myData; 
     }, 
     setData: function (data) { 
     this.myData = data; 
     } 
    } 
    .controller('controller1', function(myService) { 
    }) 
    .controller('controller2', function(myService) { 
    }) 
}); 

如果子指令沒有範圍數據，也可以將指令範圍設置爲false，它將繼承父控制器的作用域。

angular.module('myApp', []) 
.directive('myDirective', function() { 
    return { 
    restrict: 'E', 
    scope: false, 
    controller: 'controller1' 
    }; 
});