使用角度获取数据属性值答案

【问题标题】：Get data-attribute value with angular使用角度获取数据属性值
【发布时间】：2015-03-12 17:52:40
【问题描述】：

我正在尝试以角度获取数据属性元素的值。我有这样的控制器：

控制器代码：

(function() {

  'use strict';

  var app = angular.module('myApp');

  app.controller('globalCtrl', function ($scope) {

      var dataPreview = document.getElementsByClassName('element');


      $scope.item = {
        name: dataPreview.getAttribute("data-branch"),
        shortname: dataPreview.getAttribute("data-short-name")

      };

  });

}(window, window.angular));

但是控制台返回如下错误：

dataPreview.getAttribute 不是函数

我找不到解决这个错误的方法，有人可以告诉我我的代码有什么问题

【问题讨论】：

标签： angularjs angularjs-scope custom-data-attribute

【解决方案1】：

使用类选择器时需要遍历元素。

例如：

var dataPreview = document.getElementsByClassName('element')[0];
// here 0 index element will be selected and then only you'll be able to use 
//  getAttribute method

如果使用id，则不需要迭代：

var dataPreview = document.getElementById('element');

【讨论】：

非常感谢您的帮助！我忘记了这一点；）

【解决方案2】：

带有数据属性的简单html标签

<div class="branchUI" data-branch="some branch">I'm ok here</div>

我给按钮添加了class，通过querySelector来获取，然后获取如下数据属性

var branchUI = angular.element( document.querySelector( '.branchUI' ) );
console.log( branchUI.data( 'branch' ) );

【讨论】：