如何在AngularJS中向输入元素动态添加指令 [英] How to dynamically add a directive to an input element in AngularJS
问题描述
我有一个包含许多输入元素的大型表单,并且如果此表单用于呈现只读元素,我想向该表单中的所有输入元素添加ng-readOnly指令.我可以遍历每个输入元素ng-readOnly,但这不是很干燥,并且很难维护.
I have a large form with many input elements, and if this form is being used to render an element that is read only, I would like to add the ng-readOnly directive to all input elements in the form. I could go through and put ng-readOnly one each input element, but that isn't very dry and it would be difficult to maintain.
我想到了几种可能性:
- form标记上的指令,该指令可查看所有子项并添加ng-readOnly指令
- 重写输入指令,将ng-readOnly指令添加到scope.readOnly为true.
问题是我不确定这两种方法如何工作(对于Angular来说还很新).我确实知道我必须以某种方式利用$ compile或$ apply来获取新加入的指令的角度,但我不确定该怎么做.
The problem is I'm not sure how either of these would work (pretty new to Angular). I do know I would have to utilize $compile or $apply in someway to get angular to pick up the newly added directive, I'm just not sure how to go about it.
推荐答案
我认为第一个选项看起来不错:
First option looks good in my opinion:
<div ng-app="app" ng-controller="ctrl">
<form transform-inputs>
<input type="text" ng-model="model1"/>
<input type="text" ng-model="model2"/>
<input type="text" ng-model="model3"/>
</form>
</div>
指令:
.directive('transformInputs',function($compile){
return{
restrict: 'AE',
link: function(scope, elem, attrs){
elem.children('input').attr('ng-read-only',true);
$compile(elem.contents())(scope);
}
}
})
http://jsfiddle.net/aartek/7RHW7/
这篇关于如何在AngularJS中向输入元素动态添加指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!