在自定義指令中，`controller`對`link`有什麼功能？

在試圖掌握創建我自己的AngularJS指令時，我有一個例子，可以做我需要的一切，但是要意識到在借用各種例子時，我現在可以在控制器中爲指令的視圖創建功能，作爲以及鏈接。在自定義指令中，`controller`對`link`有什麼功能？

看來，我能得到所有一起擺脫控制器的，只是把一切都變成鏈接，或者是有什麼，我可以說我不能做鏈接控制器嗎？

http://jsfiddle.net/edwardtanguay/gxr49h96/6

.directive('itemMenu', function() { 

    var controller = function ($scope) { 
     var vm = this; 
     vm.addItem = function() { 
      $scope.add(); 
      vm.items.push({ 
       'kind': 'undefined', 
        'firstName': 'Joe', 
        'lastName': 'Newton', 
        'age': Math.floor(Math.random() * 60) + 20 
      }); 
     }; 

     // DOES THE SAME AS THE FUNCTION DEFINED BELOW IN LINK   
     //  $scope.convertToInternal = function(item) { 
     //   item.internalcode = 'X0000'; 
     //   item.kind = 'internal'; 
     //  };   
    }; 

    return { 
     restrict: 'A', 
     scope: { 
      item: '=', 
      add: '&' 
     }, 
     controller: controller, 
     controllerAs: 'vm', 
     bindToController: true, 
     template: '<div ng-include="getTemplateUrl()"></div>', 
     link: function (scope, element, attrs) { 
      scope.getTemplateUrl = function() { 
       switch (scope.item.kind) { 
        case 'external': 
         return 'itemMenuTemplateExternal'; 
        case 'internal': 
         return 'itemMenuTemplateInternal'; 
        default: 
         return 'itemMenuTemplateUndefined'; 
       } 
      }; 

      scope.convertToInternal = function(item) { 
       item.internalcode = 'X0000'; 
       item.kind = 'internal'; 
      }; 
     }, 
    }; 

})

來源

2015-08-19 Edward Tanguay

我找到了一個很好的解釋這個在這裏 - http://stackoverflow.com/questions/15676614/directive-link-vs-compile-vs-controller – svikasg

您可能會發現大量水樣咆哮大約控制器VS鏈接，其中大部分包含來自$compile服務文檔的信息。

接聽直接的問題，

來自其他模塊
控制器/文件可以經由角DI插入指令與controller: 'Controller'
controller可以用依賴關係被注入而link具有固定參數列表並獲得指令的依賴
controller之前踢因此它可以準備在某些情況下鏈接或重新編譯元素的範圍ASAP
控制器功能具有this，其代碼外觀符合其他類OOP的ES5代碼，零件，例如service服務或第三方代碼
作爲結果，控制器適於被定義爲ES2015或TS類。
指令的控制器可以是require d由子指令，並提供了這兩個
controller之間方便單向交互利用了bindToController: true + controllerAs: 'vm'並實現$scope.vm配方（特別有用的打JS原型繼承），而保持this語法
bindToControllerobject value提供了用於遺傳scope: true範圍屬性的綁定，沒有更多的$attr.$observe
bindToController對象值爲隔離範圍提供了進一步的粒度。如果有應綁定到控制器和訪問與require某些屬性，它現在可以

做哪個代碼去controller，哪些link更微妙的問題。

傳統上使用角度控制器作爲視圖模型，如MVVM（因此controllerAs: 'vm'約定），所以如果有控制器的任務（即將服務綁定到範圍值或設置範圍觀察者），則將其提供給他們，把其餘的留給link。

由於$attrs，$element和$transclude本地依賴性應該明確地注入到控制器中，人們可以認爲這是一個標誌，以跳過它們（$scope也應該被注射 $scope.$ 方法，但我們會忽略這個事實）。

有一些非宗教方面的擔憂應由link而不是controller來完成。 require控制器本身不提供d控制器，因此這種指令交互發生在link。由於controller在比link更早的編譯階段啓動，因此綁定的屬性值將不會被內插，所以取決於這些範圍值的代碼將變爲link。這同樣適用於其他與DOM相關的代碼，它會轉到linkfor a reason。

它主要是正確的代碼風格的問題，而不是真正的必要性。至於示例中的代碼，所有scope的東西都是控制器友好的，我不認爲link應該在那裏。

來源

2015-08-19 17:13:03 estus

感謝這個響應。我的主要實用主義是「使用控制器而不是鏈接」，正如你在上面的例子中建議的那樣，在這裏我把所有的東西從鏈接移動到控制器，並且它工作的很好：http://jsfiddle.net/edwardtanguay/t7oxh9e0/1 –

在自定義指令中，`controller`對`link`有什麼功能？

回答

相關問題