使用 angular 获取数据属性值

Question

我正在尝试获取 angular 中数据属性元素的值。我的控制器是这样的：

控制器代码：

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

但是控制台returns出现如下错误：

dataPreview.getAttribute 不是函数

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

Answer 1

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

例如：

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

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

使用 angular 获取数据属性值

Get data-attribute value with angular

angularjs

angularjs-scope

custom-data-attribute