如何在一個指令angularjs中使用多個控制器？

Question

使用多個控制器是否正確？

<div ng-if="actionButtonText=='Confirm'" ng-controller="upsrCtrl" ng-controller="pt3Ctrl" ng-controller="spmCtrl"> 
    <button ng-click="checkAnswer()" class="button button-confirm-outline"> 
     {{actionButtonText}} 
    </button> 
</div> 

我用這些的原因是我有這樣的頁腳和動態基於不同的控制器上的內容變化。

Answer 1

嘗試使用下面的自定義指令。採取一個plunker一看： https://plnkr.co/edit/ileyNcaSlJYLc2bCbJeq?p=preview

app.directive('ifController', function factory($compile) { 
    var handler = { 
    restrict: 'A', 
    scope: { 
     ifController: '@' 
    }, 
    link: function(scope, element, attrs){ 
     var lastElement = null; 
     var update = function() { 
     if (lastElement !== null) { 
      lastElement.remove(); 
     } 
     var template = '<div ng-controller="' + scope.ifController + '">'+ 
       '<button ng-click="checkAnswer()" class="button button-confirm-outline">'+ 
       '{{actionButtonText}}'+ 
       '</button>' + 
       '</div>'; 
      var linkFn = $compile(template); 
      var content = linkFn(scope); 
      element.append(content); 
      lastElement = content; 
     } 
     scope.$watch('ifController', update); 
     } 
    }; 
    return handler; 
}); 

你可以通過一個變量如果-位指示像下面設置控制器：

<div if-controller="{{controller}}"> 

這將刪除元素的以前的版本，並重新編譯一個用一個新的控制器。你也可以修改這個指令來把它用作你使用的另一個指令的包裝（只是改變模板）。

Answer 2

我假設你的ng-if處理使用ng控制器的開關。 ng-click是觸發交換機的事件。如果是這種情況，只渲染所有3塊只顯示基於parentCtrl。

<div ng-controller="parentCtrl"> 
    <div ng-if="parentCtrl.actionButtonText=='upsrCtrl'" ng-controller="upsrCtrl"> 
     <button ng-click="checkAnswer()" class="button button-confirm-outline"> 
      {{actionButtonText}} 
     </button> 
    </div> 
    <div ng-if="parentCtrl.actionButtonText=='pt3Ctrl'" ng-controller="pt3Ctrl"> 
     <button ng-click="checkAnswer()" class="button button-confirm-outline"> 
      {{actionButtonText}} 
     </button> 
    </div> 
    <div ng-if="parentCtrl.actionButtonText=='spmCtrl'" ng-controller="spmCtrl"> 
     <button ng-click="checkAnswer()" class="button button-confirm-outline"> 
      {{actionButtonText}} 
     </button> 
    </div> 
</div> 

Answer 3

提供控制器的包裝可能是一種找到您的解決方案的方法。但是如果你在元素級別看到它，An元素不能攜帶多於一個的控制器。

正如我所看到的有一種方法使一個控制器作爲主控制器，並通過另一個控制器作爲一些其他參數。像vm我在波紋管例子中使用。這裏vm是頁面級別控制器實例（元素存在的頁面的控制器）。使用Isolated scope這裏訪問vm

<div ng-if="actionButtonText=='Confirm'" ng-controller="upsrCtrl"> 
    <button ng-click="checkAnswer()" class="button button-confirm-outline" vm='vm'> 
    {{actionButtonText}} 
    </button> 
    </div> 

但更好的辦法，我會建議是與它的獨立的控制器使用一個以上的指令，並使用它。這將是某種屬性級別指令。這將使你的目的解決。

app.directive('dirUp', function() { 
    return { 
    controller: function(scope) { 
    //directive controller 
    } 
    }; 
}); 

app.directive('dirDown', function() { 
return { 
    controller: function(scope) { 
    //directive controller 
     } 
     }; 
    }); 

和HTML

<div dir-up use-down></div> 

希望它會幫助你。