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

Question

我试图通过使用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结合起来可能不会太糟糕.

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

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.