如何在一个指令angularjs中使用多个控制器?
使用多个控制器是否正确?如何在一个指令angularjs中使用多个控制器?
<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>
我用这些的原因是我有这样的页脚和动态基于不同的控制器上的内容变化。
尝试使用下面的自定义指令。采取一个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}}">
这将删除元素的以前的版本,并重新编译一个用一个新的控制器。你也可以修改这个指令来把它用作你使用的另一个指令的包装(只是改变模板)。
我假设你的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>
我需要设置新的'parentCtrl'?或者只是使用代码... – Nere
必须设置父控制器。或在指令之间共享服务。我只会使用父控制器 –
提供控制器的包装可能是一种找到您的解决方案的方法。但是如果你在元素级别看到它,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>
希望它会帮助你。
是什么让你想要这样的设计?你只有一个范围函数checkAnswers(),为什么你需要三个控制器来处理这个 –
头 - >内容(动态变化) - >页脚 – Nere
页眉和页脚不需要改变,只有内容会改变。内容得到了不同的控制器 – Nere