How to Get Html Element Attributes in AngularJS?

Question

Edit: Everyone went on all kinds of tangents, but the question remains - how do I get an attribute of an html element inside an angular controller?

Here is a plnkr attempt: http://plnkr.co/edit/0VMeFAMEnc0XeQWJiLHm?p=preview

    //$scope.myElem = angular.element('testDiv'); //this breaks angular
    $scope.myElem = $document.find('testDiv'); //this doesn't break angular, but unclear what it returns
    $scope.myAttr = $scope.myElem.name; //this returns nothing

If you need convincing that this is actually necessary - I need to find when a user scrolls through a div, as is shown here: http://jsfiddle.net/rs3prkfm/ Note that this has nothing to do with the question, simply a scenario. The question is simple - how do I get an attribute's value?

References:
Useless official docs: https://docs.angularjs.org/api/ng/function/angular.element
The only useful link that still doesn't work: http://mlen.io/angular-js/get-element-by-id.html

you should write a directive and/or use ng-model for model binding. — Daniel A. White
– Daniel A. White, Commented Jul 16, 2015 at 18:11
I don't understand how a directive is relevant at all. Not being rude, just really. Ng-model would get me value, true, I need to change my question. Really looking for atributes, like element.clientHeight. — VSO
– VSO, Commented Jul 16, 2015 at 18:13
a directive will allow you to communicate cleanly with anything. — Daniel A. White
– Daniel A. White, Commented Jul 16, 2015 at 18:13
Can you elaborate on that? What benefit is there to me putting the div in a directive...? Are you suggesting its own controller/scope? Why? — VSO
– VSO, Commented Jul 16, 2015 at 18:15
let the div be a directive. Then you can require in the other controller and call functions on it. — Daniel A. White
– Daniel A. White, Commented Jul 16, 2015 at 18:16

Julia Will · Accepted Answer · 2015-07-16 18:27:38Z

1

You could use the element api https://docs.angularjs.org/api/ng/function/angular.element

There should be only very few occasions where you would really need it, though.

answered Jul 16, 2015 at 18:27

Julia Will

5963 silver badges8 bronze badges

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

6 Comments

VSO Over a year ago

Danke schon, aber diese link ist in die Frage.

VSO Over a year ago

Also, unfortunately it doesn't work - plunk added to original post.

Julia Will Over a year ago

It works pretty well actually. There were a couple of issues with the code. First, the HTML elements had some wrong syntax. Second, the angular app was never run. And the element api does need to receive a dom object. Please see edited plunkr: plnkr.co/edit/zqHMqqiv1rfZk7F1sqbL - hope that will help you to move forward

VSO Over a year ago

Interesting, I solved it like this: plnkr.co/edit/0VMeFAMEnc0XeQWJiLHm?p=preview using the article here: blog.sodhanalibrary.com/2014/08/… I still think the docs are unclear as ****, but maybe that's just me. Thank you.

VSO Over a year ago

Sooooo....any idea on how to get the clientHeight property by any chance? Not part of the question, you already answered the q.

|

Juan Marcos Armella · Accepted Answer · 2015-07-16 18:26:47Z

1

You should manipulate the DOM using directives. The controller should only manipulate the data of the application and offer it to the html.

If you have direct manipulation on the Controller you can't, for example, bind several views to the controller. Also, if you change the id of one tag in the html and you are manipuling it directly in you controller, the controller will break.

Read this:

http://ng-learn.org/2014/01/Dom-Manipulations/

Hope it helps.

answered Jul 16, 2015 at 18:26

Juan Marcos Armella

7376 silver badges13 bronze badges

Comments

Cyberdelphos · Accepted Answer · 2015-07-16 18:37:13Z

1

Use angular.element:

var myElem = angular.element("#testDiv"); // here you get your div
var myAttr = myElem.attr("name"); // you get: "testDiv"

Remember you have limitations using jqlite. If you want full functionallity of jquery element, import a full "jquery.js" before importing your angular script.

However, to manipulate the DOM you SHOULD use directives as stated by most of the answers.

edited Jul 16, 2015 at 18:37

answered Jul 16, 2015 at 18:31

Cyberdelphos

1,34414 silver badges25 bronze badges

7 Comments

VSO Over a year ago

I am testing now, will accept answer once done. Selecting a dom attribute isn't considered manipulation though? Or is it? I just need to check it. If it matches x, I run a function that doesn't have anything to do with dom.

Cyberdelphos Over a year ago

Ok, but why not using something like ng-click="doSomething("ofThisKind")" for that? Then in your controller your doSomething function will act according to its parameter

VSO Over a year ago

jsfiddle.net/rs3prkfm Need to disable something when user scrolls to bottom of div.

Cyberdelphos Over a year ago

for that you can use ng-disabled docs.angularjs.org/api/ng/directive/ngDisabled. which can actually be a function that checks the scroll position: ng-disabled="isScrollBottom()"

VSO Over a year ago

Of course, but I need to detect when the user scrolls to the bottom to set ng-disabled = "isUserScrolledToBottom"

|

Collectives™ on Stack Overflow

How to Get Html Element Attributes in AngularJS?

3 Answers 3

6 Comments

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related