How do you get an element attribute value?
e.g. HTML element:
<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
}
Any suggestions much appreciated, JSFIDDLE demo here:http://jsfiddle.net/h3TFy/
Since you are sending the target element to your function, you could do this to get the id:
function doStuff(item){
var id = item.attributes['data-id'].value; // 345
}
attributes part of the DOM or is this something AngularJS brings to the table?
You just can use doStuff($event) in your markup and get the data-attribute values via currentTarget.getAttribute("data-id")) in angular. 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"));
};
});
Forked your initial jsfiddle: http://jsfiddle.net/9mmd1zht/116/
the .data() method is from jQuery. If you want to use this method you need to include the jQuery library and access the method like this:
function doStuff(item) {
var id = $(item).data('id');
}
I also updated your jsFiffle
UPDATE
with pure angularjs and the jqlite you can achieve the goal like this:
function doStuff(item) {
var id = angular.element(item).data('id');
}
You must not access the element with [] because then you get the pure DOM element without all the jQuery or jqlite extra methods.
data() method is the same as jQuery
.data() method is the same, but if you access the element with [] then you you get a pure DOM element and loose all extra functionality added by jqlite or jQuery.data('key')?.data('key') you get only attributes starting with data- (in you example the value of data-key="someValue", if you want to access other attributes, you must use .attr('attributeName')
You can do this using dataset property of the element, using with or without jquery it work... i'm not aware of old browser
Note: that when you use dash ('-') sign, you need to use capital case. Eg. a-b => 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>
I added class to button to get by querySelector, then get data attribute
var myButton = angular.element( document.querySelector( '.myButton' ) );
console.log( myButton.data( 'id' ) );
If you are using Angular2+ following code will help
You can use following syntax to get attribute value from html element
//to retrieve html element
const element = fixture.debugElement.nativeElement.querySelector('name of element'); // example a, h1, p
//get attribute value from that element
const attributeValue = element.attributeName // like textContent/href
Use Jquery functions
<Button id="myPselector" data-id="1234">HI</Button>
console.log($("#myPselector").attr('data-id'));
item.getAttribute('data-id')