AngularJS - Identify all elements with a class and add an attribute without jQuery

Question

I have to identify all the elements having class in-brackets and add an attribute href="#" to them. I have to do this without jQuery.

This is my code example now:

<a class="in-brackets">Banana</a>
<a class="in-brackets">Apple</a>

In my Controller:

document.getElementsByClassName("in-brackets").setAttribute("href", "#");

But nothing happens. The element doesn't have the attribute.

Have you read How do I "think in AngularJS" if I have a jQuery background? — JoseM
– JoseM, Commented Apr 7, 2014 at 12:51
@JoseM excellent resource! The point of this link is to think about why you're trying to set href to #. My guess based upon my experiences is that the links aren't showing as links, which I've solved via CSS: a{cursor: pointer;} — Brocco
– Brocco, Commented Apr 7, 2014 at 13:03

gkalpak · Accepted Answer · 2014-04-07 13:05:21Z

2

The "Angular way" is to only do DOM manipulation inside a directive.
You can build a custom directive for that:

.directive('inBrackets', function () {
    return {
        restrict: 'C',
        link: function postLink(scope, elem, attrs) {
            attrs.$set('href', '#');
        }
    };
});

Read more about custom directives and the various properties of the "Directive Definition Object" here.

edited Apr 7, 2014 at 13:05

answered Apr 7, 2014 at 12:58

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

Comments

tymeJV · Accepted Answer · 2014-04-07 12:52:21Z

1

You'll have to iterate the elements:

var elems = document.getElementsByClassName("in-brackets");

for (var i = 0; i < elems.length; i++) {
    elems[i].setAttribute("href", "#");
}

answered Apr 7, 2014 at 12:52

tymeJV

105k14 gold badges165 silver badges158 bronze badges

1 Comment

gkalpak Over a year ago

While correct in general, direct DOM manipulation is against the Angular philosophy (and highly discouraged in an Angular app).

mingos · Accepted Answer · 2014-04-07 13:01:01Z

0

Have you tried jqLite bundled with AngularJS? It works similarly to jQuery (though only the most used features are supported); you might feel comfortable with it if you have a jQuery background.

angular.element(document.getElementsByClassName("in-brackets")).attr("href", "#");

answered Apr 7, 2014 at 13:01

mingos

24.7k12 gold badges73 silver badges108 bronze badges

Collectives™ on Stack Overflow

AngularJS - Identify all elements with a class and add an attribute without jQuery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related