2014-04-22 77 views
2

我正在嘗試從angular-ui代碼中學習。我看到btnRadio指令需要它自己。我明白指令可能require控制器,然後作爲link函數的第四個參數中的數組訪問它們。我不明白爲什麼一個指令會要求自己。在AngularJS中,爲什麼指令需要自己?

.directive('btnRadio', function() { 
    return { 
    require: ['btnRadio', 'ngModel'], 
    controller: 'ButtonsController', 
    link: function (scope, element, attrs, ctrls) { 
     var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1]; 
     ... 

https://github.com/angular-ui/bootstrap/blob/master/src/buttons/buttons.js#L15

這僅僅是要求其自己的控制器,對不對?這是什麼目的,或者它解決了什麼問題?

回答

2

該應用程序的結構對我來說很奇怪。看起來他們可以像這樣更好地定義它:

angular.module('ui.bootstrap') 
    .controller('ButtonsController', function($scope, buttonConfig) { 
    $scope.activeClass = buttonConfig.activeClass || 'active'; 
    $scope.toggleEvent = buttonConfig.toggleEvent || 'click'; 
    }) 
    .directive('btnRadio', function() { 
    return { 
     require: 'ngModel', 
     controller: 'ButtonsController', 
     link: function(scope, elem, attrs, ngModel) { 
     // These are now available here in the link function 
     scope.activeClass; 
     scope.toggleEvent; 
     // ... other functionality 
     } 
    } 
    }); 

但@Jeff是對的。他們這樣做,以便他們可以訪問ButtonsController。如果你仔細觀察代碼,他們只是用它來訪問activeClasstoggleEvent屬性。

我可以認爲這樣做的唯一理由就是爲了避免在指令上生成隔離作用域。隔離範圍可能會干擾該庫外部的代碼。

3

我相信這是檢索控制器內的鏈接功能。

+0

我也看到了,但是難道你不能從指令中直接控制控制器嗎? '.directive('btnRadio',function(ButtonsController){});' – SimplGy

+2

@SimpleAsCouldBe你試過嗎?我不認爲它可能.. http://jsfiddle.net/E6EfQ/ – javaCity

+0

糟糕,你是對的。當我需要類似的東西時,我必須將共享方法提取到服務中,並在控制器和指令之間共享服務。也許這是相關的。 – SimplGy

相關問題