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

我想找到最好的方式来获得&通过使用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代码,把它放在我的控制器里面,它工作正常.但是据我所知,这可能是一个糟糕的做法.

然而,我发现使用Directives的解决方案对于这样一个简单的任务来说太大了.
所以我想知道如果在特殊情况下组合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
}

测试和工作正常

解决方法

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

当导航到路由/视频数据时,customattr的值为1,当导航到路由/音频数据时,customattr的值为2.

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

解决方法

相关文章