如何在一个指令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> 

希望它会帮助你。