How to get and set an attribute value for a HTML tag using AngularJS?

Question

I am trying to find the best way to get & set a value for an attribute in a HTML tag by using AngularJS. Example:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My WebSite</title>
</head>
<body>
    <h1>Title</h1>

    <p>Praragraph1</p>

    <p data-mycustomattr="1234567890">Paragraph 2</p>

    <p>Paragraph 3</p>

    <footer>Footer</footer>
</body>
</html>

Then, when I call the url '/home', I would like to get the value from data-mycustomattr (that I will use for another calculation), and then replace it for "1",

and if the url is '/category', I would like to get the value from data-mycustomattr, and replace it for "2".

With jQuery it is really simple:

$("#myPselector").attr('data-mycustomattr');

or

$("#myPselector").attr('data-mycustomattr','newValue');

I used that jQuery code, putting it inside my Controllers, and it is working fine. But as far as I read, it might be a bad practice.

However, the solutions I found, which uses Directives, are too big for a such a simple task. So I was wondering if combining jQuery and AngularJS at special circumstances may not be too bad after all.

What do you think? Do you have a better solution to get & set attribute's values?

ANSWER based on Jonathan's reply:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My WebSite</title>
</head>
<body>
    <h1>Title</h1>

    <p>Praragraph1</p>

    <p data-mycustomattr="{{mycustomattr}}">Paragraph 2</p>

    <p>Paragraph 3</p>

    <footer>Footer</footer>
</body>
</html>

Then, into the Controllers, I inserted:

$scope.mycustomattr = '1';

And for reading:

if ($scope.mycustomattr == '1'){
    // code
}

Tested and working fine.

You have to think about how you write angular very differently from jquery. This would be considered bad practice because it is accessing the DOM which is something you do not want to do in your controllers. If you absolutely must do this something like this would work angular.element(document.getElementByID('#myPselector')).attr('data-attr''); — Jonathan Palumbo
– Jonathan Palumbo, Commented May 14, 2013 at 17:47
What do you mean by calling url /home. Are you passing the value of data-mycustomattr with an ajax call, or are you actually changing routes? It looks like your doing simple binding here, and there is no need for any DOM manipulation. — Ben Felda
– Ben Felda, Commented May 14, 2013 at 17:54

Jonathan Palumbo · Accepted Answer · 2013-05-14 18:13:47Z

10

In general you want to have your model drive your view and avoid making changes to the DOM directly. One way of achieving this is to have your controller set the value of your attribute based on the route. Then bind that value to the desired attribute

 var mediaApp = angular.module('mediaApp',[]);

 mediaApp.config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/video', {templateUrl: 'video.html',   controller: 'VideoCtrl'});
      $routeProvider.when('/audio', {templateUrl: 'audio.html',   controller: 'AudioCtrl'});
 }]);

 mediaApp.controller('VideoCtrl',function($scope){
      $scope.customAttributeValue = "1";

 });

 mediaApp.controller('AudioCtrl',function($scope){
     $scope.customAttributeValue = "2";
 });

Then in your view templates simply bind the attribute.

 <h2>Videos</h2>
 <div data-customattr="{{customAttributeValue}}">
 </div>

And the audio template...

 <h2>Audio</h2>
 <div data-customattr="{{customAttributeValue}}">
 </div>

When navigating to the route /video data-customattr will have a value of 1, when navigating to the route /audio data-customattr will have a value of 2.

edited May 14, 2013 at 18:13

answered May 14, 2013 at 18:08

Jonathan Palumbo

6,8711 gold badge31 silver badges40 bronze badges

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

3 Comments

Fabio Nolasco Over a year ago

Thank you Jonathan! Now I ask myself how I couldn't see that.

Jonathan Palumbo Over a year ago

Glad it was helpful. Coming from jquery to angular has a steep learning curve. Here is a thorough answer that could be very helpful to read. stackoverflow.com/questions/14994391/…

Pradep Over a year ago

I spent so much time getting expression errors using this. Finally made it work by using just the value in double quotes without the double curly braces. Like this <tile progress="progressValue"> instead of <tile progress = "{{progressValue}}">

Collectives™ on Stack Overflow

How to get and set an attribute value for a HTML tag using AngularJS?

ANSWER based on Jonathan's reply:

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

ANSWER based on Jonathan's reply:

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related