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;
});

您可以通过将变量传递给if-contoller来设置控制器，如下所示：

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

这将删除以前的元素构建，并使用新的一个控制器编译一个新元素。您也可以修改此指令，将其用作另一个指令的包装器（只需更改模板）。

Answer 2

我假设您的ng-if处理要使用ng-controller的开关。 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

提供控制器包装器可能是找到解决方案的一种方法。但是如果你在元素级别上看到它，那么一个元素不能携带多于一个控制器。

正如我所看到的，有一种方法可以将一个控制器作为主控制器并将另一个控制器作为其他参数传递。比如我在下面的例子中使用的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>

希望它会对你有所帮助。

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

3 个答案: