Question

我正在努力找到最好的方法来获得＆amp;使用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”，

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

使用jQuery非常简单：

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

或

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

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

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

你怎么看？你有更好的解决方案来获得＆amp;设置属性的值？

ANSWER基于Jonathan的回复：

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

经过测试并正常工作。

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

当导航到路径/视频data-customattr的值为1时，导航到路径/音频data-customattr的值为2.

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

ANSWER基于Jonathan的回复：

1 个答案: