CODEWITHSUNDEEP
angularjsangularjs-directive
J Castillo
J Castillo

Reputation: 3357

How to update attribute on element via directive using angularjs

I have a pretty simple case in AngularJS where:

<select ng-repeat="el in elms" disabled="disabled" remove-disable>

     <option>make a selection</option>

</select>

Initially my select is empty and so I added the disable attr to avoid having people click on it.

When the ajax call is completed and the select renders the list of options I want to remove the disable attribute.

It looks straight forward, right? but all I have seen is approaches using $watch and not for exactly this case.

I'm approaching it from a jQuery point of view where an looking at the DOM after the ajax call, finding the element and removing the attr. like this:

$('select').removeAttr('disabled');

Unfortunately I don't want to do jQuery, I want to do it with a directive, since that is what is for. the angular folks say that all DOM manipulations should be done via directives so I will like to know just how.



    enrollmentModule.directive('removeDisable', function () {
        return {
            restrict: 'A',
                scope: {
                    ngModel : '='
                },
            link: function (scope, element, attrs) {
                console.log('no people yet');
                if (element[0].complete) {
                    console.log('element finish rendering');
                };
                scope.$watch(attrs.ngModel, function () {
                     console.log('agents arrived');
                    });
                }
            };
    });

Upvotes: 0

Views: 1566

Answers (1)

Blackhole
Blackhole

Reputation: 20401

AngularJS has a ngDisabled directive that you can use to make the link between the state of the list and an expression :

 <select ng-repeat="el in elms" ng-disabled="elms.length == 0">
      <option>make a selection</option>
 </select>

Upvotes: 4

Related Questions