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, May 14 '13 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, May 14 '13 at 17:54

Jonathan Palumbo · Accepted Answer · 2013-05-14T18:13:47.437

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.

Thank you Jonathan! Now I ask myself how I couldn't see that. — Fabio Nolasco, May 14 '13 at 19:15
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. http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background — Jonathan Palumbo, May 14 '13 at 20:58
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 instead of — Pradep, Aug 05 '15 at 20:45

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

ANSWER based on Jonathan's reply:

1 Answers1