How to dynamically add a directive to an input element in AngularJS

Question

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.

I have thought of a few possibilities:

A directive on the form tag that looks at all the children and adds the ng-readOnly directive
Override the input directive to add the ng-readOnly directive in scope.readOnly is true.

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.

akn · Accepted Answer · 2014-06-20 20:16:53Z

2

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:

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

answered Jun 20, 2014 at 20:16

akn

3,7221 gold badge29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zachary Wright Over a year ago

This is great, thanks. I didn't realize that the elem object is a jQuery object, really makes traversing the DOM much more familiar.

akn Over a year ago

But note that if you don't include jQuery into your project, elem is a jQlite object which provides only selected methods from jQuery (docs.angularjs.org/api/ng/function/angular.element)

Collectives™ on Stack Overflow

How to dynamically add a directive to an input element in AngularJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related