17

我试图找到使用 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 是否可能不会太糟糕。

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

答案基于乔纳森的回复：

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

测试和工作正常。

4

1 回答 1

10

通常，您希望模型驱动您的视图并避免直接更改 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>

导航到路线时 /videodata-customattr的值为 1，导航到路线时 /audiodata-customattr的值为 2。

于 2013-05-14T18:08:25.113 回答