jQuery 如何使用 AngularJS 获取和设置 HTML 标签的属性值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16549498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get and set an attribute value for a HTML tag using AngularJS?
提问by Fabio Nolasco
I am trying to find the best way to get & set a value for an attribute in a HTML tag by using AngularJS. Example:
我试图找到使用 AngularJS 获取和设置 HTML 标记中属性值的最佳方法。例子：
<!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",
然后，当我调用 url '/home' 时，我想从 data-mycustomattr 中获取值（我将用于另一个计算），然后将其替换为“1”，
and if the url is '/category', I would like to get the value from data-mycustomattr, and replace it for "2".
如果 url 是“/category”，我想从 data-mycustomattr 获取值，并将其替换为“2”。
With jQuery it is really simple:
使用 jQuery 真的很简单：
$("#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.
我使用了那个 jQuery 代码，把它放在我的控制器中，它工作正常。但据我所知，这可能是一种不好的做法。
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.
然而，我找到的使用指令的解决方案对于这样一个简单的任务来说太大了。所以我想知道在特殊情况下结合 jQuery 和 AngularJS 是否毕竟不是太糟糕。
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.
经测试，工作正常。
采纳答案by Jonathan Palumbo
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
通常，您希望模型驱动视图并避免直接更改 DOM。实现此目的的一种方法是让您的控制器根据路由设置您的属性值。然后将该值绑定到所需的属性
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-customattrwill have a value of 1, when navigating to the route /audio data-customattrwill have a value of 2.
导航到路线时 /videodata-customattr的值为 1，导航到路线时 /audiodata-customattr的值为 2。
