Question

我有一个包含许多输入元素的大表单，如果这个表单用于呈现只读元素，我想将ng-readOnly指令添加到表单中的所有输入元素。我可以通过每个输入元素输入ng-readOnly，但这不是很干，很难维护。

我想到了几个可能性：

表单标签上的指令，用于查看所有子项并添加ng-readOnly指令
覆盖input指令以在scope.readOnly中添加ng-readOnly指令为true。

问题是我不确定这些中的任何一个是如何工作的（对Angular来说很新）。我知道我必须利用$ compile或$ apply来获得新的指令，我只是不确定如何去做。

Answer 1

在我看来，第一个选项看起来不错：

<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中的输入元素

1 个答案: