如何使用 AngularJS 获取和设置 HTML 标签的属性值？答案

【问题标题】：How to get and set an attribute value for a HTML tag using AngularJS?如何使用 AngularJS 获取和设置 HTML 标签的属性值？
【发布时间】：2013-05-09 02:34:08
【问题描述】：

我正在尝试找到使用 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>

然后，当我调用 url '/home' 时，我想从 data-mycustomattr 中获取值（我将用于另一个计算），然后将其替换为“1”，

如果 url 是 '/category'，我想从 data-mycustomattr 中获取值，并将其替换为“2”。

使用 jQuery 真的很简单：

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

或

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

我使用了那个 jQuery 代码，将它放在我的控制器中，它运行良好。但据我所知，这可能是一种不好的做法。

但是，我发现的使用指令的解决方案对于这样一个简单的任务来说太大了。所以我想知道在特殊情况下结合jQuery和AngularJS是否可能不会太糟糕。

你怎么看？您有更好的解决方案来获取和设置属性的值吗？

根据乔纳森的回复回答：

<!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>

然后，我在控制器中插入：

$scope.mycustomattr = '1';

阅读：

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

经过测试，工作正常。

【问题讨论】：

您必须考虑如何编写与 jquery 完全不同的 Angular。这将被认为是不好的做法，因为它正在访问 DOM，这是您不想在控制器中执行的操作。如果你绝对必须这样做，这样的事情会起作用angular.element(document.getElementByID('#myPselector')).attr('data-attr'');
调用url/home是什么意思。您是通过 ajax 调用传递 data-mycustomattr 的值，还是实际上在更改路由？看起来你在这里做了简单的绑定，不需要任何 DOM 操作。

标签： jquery html angularjs

【解决方案1】：

一般来说，您希望让您的模型驱动您的视图，并避免直接对 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";
 });

然后在您的视图模板中简单地绑定属性。

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

还有音频模板...

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

当导航到路线 /video data-customattr 时，值为 1，当导航到路线 /audio data-customattr 时，值为 2。

【讨论】：

谢谢乔纳森！现在我问自己我怎么看不到这一点。
很高兴它有帮助。从 jquery 到 angular 有一个陡峭的学习曲线。这是一个详尽的答案，可能对阅读很有帮助。 stackoverflow.com/questions/14994391/…
我花了很多时间使用它来获取表达式错误。最后通过仅使用双引号中的值而不使用双花括号来使其工作。像这样而不是