我想找到最好的方式来获得&通过使用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.
