Javascript AngularJS-是否可以在链接或编译中更改指令上ngModel属性的值?
我正在尝试创建一个指令,该指令将根据属性值向标记添加一个ngModel属性。例如:Javascript AngularJS-是否可以在链接或编译中更改指令上ngModel属性的值?,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我正在尝试创建一个指令,该指令将根据属性值向标记添加一个ngModel属性。例如: angular.module('myModule'). directive('myDirective', function() { return { link: function(scope, elem, attrs) { var modelName = 'myPrefix.' + attrs.name; attrs.$set('ngModel', mode
angular.module('myModule').
directive('myDirective', function() {
return {
link: function(scope, elem, attrs) {
var modelName = 'myPrefix.' + attrs.name;
attrs.$set('ngModel', modelName);
}
};
});
因此,此html:
<input name="foo" my-directive></input>
被编译成
<input name="foo" ng-model="myPrefix.foo" my-directive></input>
它接受输入的名称,附加前缀,并将ngModel属性设置为该值
当我尝试在link函数中执行此操作时,似乎输入未在formController中注册,因此form.foo
返回未定义
有可能完成我想做的事情吗
编辑:
似乎是在HTML上设置了ngModel
属性,但它没有在表单中注册,或者没有实例化ngModelController。如果我在范围中查看ngModel
的值,当我修改输入时,该值不会改变。您应该查看文档中的内容。它会回答你的问题。为了进一步解释,以下是要点:
您可以捕获链接的第四个参数:
函数,它是您的ng模型
值。您可以使用该对象来读取和设置模型
link: function(scope, element, attrs, ngModel) {
if(!ngModel) return; // do nothing if no ng-model
// Specify how UI should be updated
ngModel.$render = function() {
element.html(ngModel.$viewValue || '');
};
// Listen for change events to enable binding
element.on('blur keyup change', function() {
scope.$apply(read);
});
read(); // initialize
// Write data to the model
function read() {
var html = element.html();
// When we clear the content editable the browser leaves a <br> behind
// If strip-br attribute is provided then we strip this out
if( attrs.stripBr && html == '<br>' ) {
html = '';
}
ngModel.$setViewValue(html);
}
}
链接:功能(范围、元素、属性、模型){
if(!ngModel)return;//如果没有ng模型,则不执行任何操作
//指定应如何更新UI
ngModel.$render=function(){
html(ngModel.$viewValue | |“”);
};
//侦听更改事件以启用绑定
on('blur keyup change',function(){
适用范围:$apply(读取);
});
read();//初始化
//将数据写入模型
函数read(){
var html=element.html();
//清除可编辑内容后,浏览器会留下一个
//如果提供了strip br属性,那么我们将其去掉
如果(attrs.stripBr&&html='
'){
html='';
}
ngModel.$setViewValue(html);
}
}
希望能有所帮助。我通过使用模板函数实现了目标。我认为它在link函数中不起作用,因为它发生在收集所有指令之后,因此编译器无法识别添加了ngModel
指令。不过,我不确定为什么它在编译函数中不起作用(即使我将优先级设置为100)
以下是指令的工作版本:
angular.module('myModule').
directive('myDirective', function() {
return {
replace: true,
template: function(elem, attr) {
var newElem = '<input ng-model="model.' + attr.name + '">';
return newElem;
}
};
});
angular.module('myModule')。
指令('myDirective',函数(){
返回{
替换:正确,
模板:函数(元素、属性){
var newElem=“”;
返回newElem;
}
};
});
实际上,在我的例子中,不保证在标记上创建ngModel属性,因此不会实例化ngModelController。换句话说,我希望首先编译我的指令,添加ngModel属性,然后我希望编译器识别已经添加了ngModel属性,然后实例化ngmodelcontroller,这可能有助于提前了解。根据文档中属性部分下的示例,您所做的应该用于观察ngModel。您是对的,它确实添加了属性,但输入没有修改模型,因此似乎没有正确注册。链接发生在编译器之后,因此,要使原始代码正常工作,您需要调用$compile(elem)(scope)之类的函数来重新编译并获取对DOM的更改,但问题是,您不希望在link函数中使用该函数,这将导致代码再次运行(以及再次运行等),这也需要额外的代码进行检查。模板函数将在指令发出后编译,这就是它解决问题的原因。