Как получить и установить значение атрибута для HTML-тега, используя AngularJS?

Я пытаюсь найти лучший способ получить и установить значение для атрибута в теге HTML, используя AngularJS. Пример:

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

Протестировано и работает нормально.

Ответ 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.