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
}

Любые предложения, которые были высоко оценены, Демо JSFIDDLE здесь: http://jsfiddle.net/h3TFy/

Ответ 1

Поскольку вы отправляете целевой элемент в свою функцию, вы можете сделать это, чтобы получить идентификатор:

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

Ответ 2

метод .data() - jQuery. Если вы хотите использовать этот метод, вам необходимо включить библиотеку jQuery и получить доступ к следующему методу:

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

Я также обновил ваш jsFiffle

UPDATE

с чистыми угловыми и jqlite вы можете достичь цели, как this:

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

Вы не должны обращаться к элементу с помощью [], потому что тогда вы получите чистый элемент DOM без всех дополнительных методов jQuery или jqlite.

Ответ 3

Вы можете использовать doStuff ($ event) в своей разметке и получить значения атрибутов данных через currentTarget.getAttribute( "data-id" )) в 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"));
    };
});

Запустил ваш исходный jsfiddle: http://jsfiddle.net/9mmd1zht/1/

Ответ 4

Вы можете сделать это, используя свойство набора данных элемента, используя с jquery или без него. Я не знаю старого браузера Обратите внимание: когда вы используете знак тире ('-'), вам нужно использовать регистр капитала. Например. 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>

Ответ 5

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>

Ответ 6

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

Я добавил класс к кнопке, чтобы получить querySelector, а затем получить атрибут данных

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

Ответ 7

Использовать функции JQuery

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