AngularJS – 获取元素属性值

你如何得到一个元素属性值?

例如HTML元素:

<button data-id="345" ng-click="doStuff($element.target)">Button</button> 

JS:

 function doStuff(item){ angular.element(item)[0].data('id'); // undefined is not a function } 

任何build议非常感谢,JSFIDDLE演示在这里: http : //jsfiddle.net/h3TFy/

既然你正在发送目标元素到你的函数,你可以这样做来得到id:

 function doStuff(item){ var id = item.attributes['data-id'].value; // 345 } 

.data()方法来自jQuery 。 如果你想使用这个方法,你需要包含jQuery库并访问这样的方法:

 function doStuff(item) { var id = $(item).data('id'); } 

我也更新了你的jsFiffle

UPDATE

用纯的angularjs和jqlite你可以达到这样的目标:

 function doStuff(item) { var id = angular.element(item).data('id'); } 

你不能用[]访问元素,因为那么你得到的纯DOM元素没有所有的jQuery或jqlite额外的方法。

您可以在标记中使用doStuff($ event),并通过currentTarget.getAttribute(“data-id”))获取数据属性值。 HTML:

 <div ng-controller="TestCtrl"> <button data-id="345" ng-click="doStuff($event)">Button</button> </div> 

JS:

 var app = angular.module("app", []); app.controller("TestCtrl", function ($scope) { $scope.doStuff = function (item) { console.log(item.currentTarget); console.log(item.currentTarget.getAttribute("data-id")); }; }); 

分叉你最初的jsfiddle: http : //jsfiddle.net/9mmd1zht/1/

您可以使用元素的数据集属性,使用或不使用jquery它的工作…我不知道旧的浏览器注意:当您使用破折号(' – ')标志,您需要使用大写的情况。 例如。 ab => aB

 function onContentLoad() { var item = document.getElementById("id1"); var x = item.dataset.x; var data = item.dataset.myData; var resX = document.getElementById("resX"); var resData = document.getElementById("resData"); resX.innerText = x; resData.innerText = data; console.log(x); console.log(data); } 
 <body onload="onContentLoad()"> <div id="id1" data-x="a" data-my-data="b"></div> Read 'x': <label id="resX"></label> <br/>Read 'my-data': <label id="resData"></label> </body> 
 function onContentLoad() { var item = document.getElementById("id1"); var x = item.dataset.x; var data = item.dataset.myData; var resX = document.getElementById("resX"); var resData = document.getElementById("resData"); resX.innerText = x; resData.innerText = data; console.log(x); console.log(data); } 
 <body onload="onContentLoad()"> <div id="id1" data-x="a" data-my-data="b"></div> Read 'x': <label id="resX"></label> <br/>Read 'my-data': <label id="resData"></label> </body> 
 <button class="myButton" data-id="345" ng-click="doStuff($element.target)">Button</button> 

我添加类到button获取通过querySelector,然后获取数据属性

 var myButton = angular.element( document.querySelector( '.myButton' ) ); console.log( myButton.data( 'id' ) ); 

使用JQuery的function

 <Button id="myPselector" data-id="1234">HI</Button> console.log($("#myPselector").attr('data-id'));