如何使用AngularJS获取和设置HTML标记的属性值?

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'时，我想从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');

或

$("#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.

测试和工作很好。

1 个解决方案

#1

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-customattr will have a value of 1, when navigating to the route /audio data-customattr will have a value of 2.

导航到路由/视频数据时，customattr值为1，导航到路由/音频数据时，customattr值为2。

#1