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

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

jquery html angularjs

Jquery 如何使用AngularJS获取和设置HTML标记的属性值？,jquery,html,angularjs,Jquery,Html,Angularjs,我正试图通过使用AngularJS找到为HTML标记中的属性获取和设置值的最佳方法。例如： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>My WebSite</title> </head> <body> <h1>Title</h1> <p>Praragraph1</p

我正试图通过使用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>

或

我使用了jQuery代码，将它放在我的控制器中，它工作得很好。但据我所知，这可能是一种不好的做法

然而，我发现的使用指令的解决方案对于如此简单的任务来说太大了。所以我想知道在特殊情况下将jQuery和AngularJS结合起来是否还不算太糟糕

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

根据乔纳森的回答回答：以及阅读：

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截然不同的文件。这将被认为是不好的做法，因为它正在访问DOM，这是您不希望在控制器中执行的操作。如果您确实必须这样做，那么像这样的操作将起作用

angular.element（document.getElementByID（'#myPselector'））.attr（'data-attr'）调用url/home是什么意思。您是通过ajax调用传递数据mycustomattr的值，还是实际更改路由？看起来您在这里做的是简单的绑定，不需要任何DOM操作。谢谢Jonathan！现在我问自己，我怎么看不到这一点。很高兴这有帮助。从jquery到angular有一条陡峭的学习曲线。这里有一个完整的答案，读起来可能会很有帮助。我花了很多时间用这个来获取表达式错误。最后，通过只使用双引号中的值，而不使用双大括号，实现了这一点。像这样而不是
if ($scope.mycustomattr == '1'){
    // code
}

 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>