AngularJS - retrieving evaluated attribute

Question

I've got the basic form input directive that sets up some form elements base on name:

angular.module('myApp').directive('formInput', function () {
  return {
    restrict: 'A',
    require: '^form',
    link: function (scope, element, attributes, form) {
      var input, name;
      input = element[0].querySelector('input, textarea, select');
      name = input.getAttribute('name');
      // ...
      // do stuff with input, name, form etc.
    }
  };
});

In my HTML I do some simple DOM setup and it does the trick.

<div form-input>
  <input type="text" name="myElement"/>
</div>

The problem comes when I start having dynamic names, i.e.

<div form-input>
  <input type="text" name="{{ getDynamicName(element) }}"/>
</div>

The dynamic name is not evaluated prior to getting into my directive. Is there a way to tackle this issue?

P.S. Given the decorative nature of the directive I prefer not to use isolate scopes.

Raphael Müller · Accepted Answer · 2015-11-24 08:13:46Z

1

Use the $timeout service with 0ms to run code after the inner elements are linked:

// Note that $timeout is now injected to the directive
    angular.module('myApp', []).directive('formInput', function ($timeout) {
        return {
            restrict: 'A',
            //require: '^form',
            link: function (scope, element, attributes, form) {
                $timeout(function() {
                        var input, name;
                        input = element[0].querySelector('input, textarea, select');
                        name = input.getAttribute('name');
                        alert(name);
                }, 0);
                // ...
                // do stuff with input, name, form etc.
            }
        };
    });

JSFiddle

edited Nov 24, 2015 at 8:13

answered Nov 24, 2015 at 8:08

Raphael Müller

9812 gold badges8 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - retrieving evaluated attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related