如何將獨立控制器移動到指令中？

我有一個工作角應用程序，但我想重構它一下。我有一堆沒有做任何事情的指令，雖然整個應用程序應該被單個指令封裝，但我仍然有兩個主控制器聲明在該指令之外。如何將獨立控制器移動到指令中？

我合併了這兩個控制器，因爲儘管他們處理不同的問題（一個處理功能數據，另一個導航狀態），但它們都是整個應用程序所必需的。

其次，我想擺脫鬆散申報和去來源：

<div ng-app="myApp" class="myApp" ng-cloak ng-controller="myController"> 
    <myAppdirective ng-controller="myNavigationController"></myAppdirective> 
</div>

到：

angular.module('myApp'). 
    directive('myAppDirective', ['myController', function(myController) { { 

     return { 
      restrict: 'AE', 
      replace: true, 
      scope: true, 
      controller: myController, 
      template: '<div>' + 
          '<ng-include src="\'partials/navigation.html\'">' + 
          '<ng-view></ng-view>' + 
         '</div>' 
     }; 
}]);

令人不解，這是行不通的。不應該這樣工作嗎？

我得到這個錯誤：https://docs.angularjs.org/error/ $噴油器/ unpr P0 = myControllerProvider％20％3 C-％20myController％20％3 C-％20myAppDirective

我試着用ngController在模板中，但是這給了我TypeError: Cannot read property 'insertBefore' of null地方？深入角碼。

我不知所措。我可能在做一些根本性錯誤的事情。但是什麼？

解決方案：我恢復了我的兩個控制器的合併。這恢復了我原來的擔憂分離，並修復了那個神祕的TypeError。

我的指令，現在看起來是這樣的：

(function() { 
    'use strict'; 

    /*global angular */ 
    angular.module('myApp'). 
    directive('myAppDirective', function() { 

     return { 
      restrict: 'AE', 
      replace: true, 
      scope: true, 
      controller: 'myController', 
      template: '<div ng-controller="myNavigationController">' + 
          '<ng-include src="\'partials/navigation.html\'"></ng-include>' + 
          '<ng-view></ng-view>' + 
         '</div>' 
     }; 
    }); 
})();

這似乎很好地工作。

來源

2014-07-16 mcv

我不認爲你可以注入控制器實例。這可能是錯誤來自哪裏（基於這個錯誤，它看起來像你發佈問題時重命名你的實際控制器名稱）。您應該只需要使用控制器屬性的字符串。

angular.module('myApp'). 
    directive('myAppDirective', [function() { { 

     return { 
      restrict: 'AE', 
      replace: true, 
      scope: true, 
      controller: 'myController', 
      template: '<div>' + 
          '<ng-include src="\'partials/navigation.html\'">' + 
          '<ng-view></ng-view>' + 
         '</div>' 
     }; 
}]);

見How can I use a registered controller in my angular directive?

來源

2014-07-16 19:25:56 dnc253

看起來很有希望，但完全不是那麼回事，我還沒有。我仍然得到'TypeError：無法讀取'null'錯誤的屬性'insertBefore'。我想知道這是否可能是由於我將兩個控制器合併（由於關注點分離，我還不完全滿意）。 – mcv

恢復這兩個控制器的合併解決了TypeError。你的控制器：'myController'，'工作。我在模板中添加了第二個控制器，這也起作用。也許不是將兩個控制器合併在一起的最好方法，但至少我將代碼再次分開，將所有內容封裝在指令中，並且不再需要幾個無用的指令，這正是我想要的。 – mcv

默認情況下，除非另有指定，否則每個指令的scope屬性設置爲false。要設置你的scope爲true，則應用該指令位於同一控制器

簡單地說，除去scope: true和controller: myController - 你的指令將繼承父控制器scope和一切都會好的。

來源

2014-07-16 19:21:24 tymeJV

如何將獨立控制器移動到指令中？

回答

相關問題