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'));
