如何在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/