AngularJS - 获取元素属性值

Question

你如何获得元素属性值？

例如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/

Answer 1

由于您要将目标元素发送到您的函数,您可以这样做以获取id:

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

Answer 2

该.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额外方法.

Answer 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/116/