如何在AngularJS中动态添加指令到输入元素

Question

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

我已经想到了几种可能性：

1. 的形式标记，看所有的孩子，并增加了NG-readonly修饰符
2. 覆盖输入指令一个指令添加的NG-readOnly的scope.readOnly中的指令是正确的。

问题是我不知道这些如何工作（对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/