Блог

У меня есть большая форма со многими входными элементами, и если эта форма используется для отображения элемента, доступного только для чтения, я хотел бы добавить директиву ng-readOnly для всех входных элементов в форме. Я мог бы пройти и поместить ng-readOnly по одному для каждого элемента ввода, но это не очень сухо, и его было бы сложно поддерживать.

Я подумал о нескольких возможностях:

1. Директива в теге формы, которая просматривает все дочерние элементы и добавляет директиву ng-readOnly
2. Переопределите директиву ввода, чтобы добавить директиву ng-readOnly в область видимости.Только для чтения имеет значение true.

Проблема в том, что я не уверен, как будет работать любой из них (довольно новый для Angular). Я знаю, что мне пришлось бы каким-то образом использовать $compile или $apply, чтобы заставить angular использовать недавно добавленную директиву, я просто не уверен, как это сделать.

На мой взгляд, первый вариант выглядит хорошо:

 <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/