AngularJS equivalent of v-el

Question

I just found the v-el directive in Vue.js which is a great convenience for DOM-manipulation.

F.ex. I could mark an element with it:

<button v-el="getCustomerButton">Get customers</button>

and in the vue component use for example this.$$.getCustomerButton.focus() to focus the button.

Is there some equivalent to v-el in angularjs?

Regards, Niels.

Kristiyan Kostadinov · Accepted Answer · 2015-09-13 08:15:18Z

1

You can achieve that same result with the following directive:

angular.module('yourModuleNameHere').directive('vEl', [function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
        // do whatever you want with element
        // just element is the jqLite-wrapped object
        // element[0] is the raw DOM node
    }
  };
}]);

Also note that element is wrapped as a jqLite object, if you want the raw DOM node, you can get it with element[0].

In general, when you've applied a directive to an element, you can access that element in the link function.

answered Sep 13, 2015 at 8:15

Kristiyan Kostadinov

3,7124 gold badges32 silver badges52 bronze badges

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

2 Comments

skovmand Over a year ago

That's right, however that would require a new directive for each element marked. Therefore two different actions would require two different directives, which I find unflexible. V-el can be reused for many different actions.

Kristiyan Kostadinov Over a year ago

Alternatively, you can pass the $event variable to ngClick, ngBlur etc, and get the element with $event.target.

Collectives™ on Stack Overflow

AngularJS equivalent of v-el

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related