Menu
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?
<!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.
669
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.
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
