我想在一个指令上定义控制器和require。像这样的东西:
return {
controller: 'ValidateElementCtrl as validate',
require: 'ngModel',
scope: {
ngModel: '='
},
link: link
};
现在,当在链接函数中定义控制器或需要ng模型时,您只能访问第四个参数。我知道第四个参数可以是一个对象并包含多个控制器等,但是当你将控制器定义为一个数组时就是如此。
这就是我所拥有的,我不知道如何访问控制器,我得到了所需的ngModel作为第四个参数:
function link(scope, element, attrs, ctrlGetsNgModel) {
console.log(ctrlGetsNgModel) // Returns the ngModel, no sign on the controller
}
我知道我可以在指令上定义一个控制器,并将其作为范围属性传递,但在这种情况下,我想为指令定义一个控制器,它将处理验证和类似,并且该控制器将仅分配给这个指令。
编辑:找到一种方法如何执行此操作:要在链接功能中同时使用ngModel和控制器,您可以将控制器分配给模板,如下所示:
然后定义对someDirectiveName的范围访问:'=',并且可以访问指令范围`scope.someDirectiveName'= <控制器范围的控制器。
不完全确定你想要实现什么,但我认为你不能把'controller as'放在一个像指令定义那样的字符串中。使用controllerAs
属性,如下所示:
return {
// ...
controller: controller,
controllerAs: 'validate'
// ....
};
如果要访问隔离范围上定义的任何属性,还可以使用bindToController: true
。但我不确定你是否需要一个隔离范围..
你能澄清一下你的实际目标是什么吗?这是你的目标???
HTML
<body ng-controller="MainCtrl">
<foo ng-model="someModel"></foo>
</body>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
// the element on which you apply the directive will need to have a model
// defined if you use `require: 'ngModel'`
$scope.someModel = {modelValue: 'blah'};
});
app.directive('foo', function(){
return {
controller: controller,
controllerAs: 'validate',
template: '<div>{{validate.someProp}}</div>',
require: 'ngModel',
link: link
};
function controller(){
this.someProp = 'bar';
}
function link(scope, element, attrs, ctrlGetsNgModel) {
console.log('ctrlGetsNgModel',ctrlGetsNgModel) // Returns the ngModel, no sign on the controller
}
});
假设您的指令名称是“validateField”,那么您可以传递这样的数组:
return {
controller: controller,
controllerAs: 'validate',
require: ['ngModel', 'validateField'],
scope: {
ngModel: '='
},
link: link
};
然后在link函数中,第四个参数将是一个包含ngModel控制器和指令控制器的数组。
function link(scope, element, attrs, ctrlArray) {
console.log(ctrlArray[0]) // Returns the ngModel controller
console.log(ctrlArray[1]) // Returns your controller
}