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:

    //$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: / 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: .element
The only useful link that still doesn't work: .html

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/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/api/ng/function/angular.element
The only useful link that still doesn't work: http://mlen.io/angular-js/get-element-by-id.html

• javascript
• html
• angularjs

Share Improve this question Follow edited Jul 16, 2015 at 19:49 VSO asked Jul 16, 2015 at 18:09 VSOVSO 12.7k2828 gold badges116116 silver badges201201 bronze badges 7

• you should write a directive and/or use ng-model for model binding. – 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 Commented Jul 16, 2015 at 18:13
• a directive will allow you to municate cleanly with anything. – 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 Commented Jul 16, 2015 at 18:15
• 1 let the div be a directive. Then you can require in the other controller and call functions on it. – Daniel A. White Commented Jul 16, 2015 at 18:16

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 1

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

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

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/2014/01/Dom-Manipulations/

Hope it helps.

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.