Get data-attribute value with angular

Question

I'm trying to get the value of a data-attributes element in angular. I have my controller like this:

controller code:

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

But the console returns the following error:

dataPreview.getAttribute is not a function

I'm lost trying to find a solution to this error, can someone tell me what's wrong with my code

Bhojendra Rauniyar · Accepted Answer · 2015-01-14 14:05:21Z

2

You need to iterate over the elements when you use class selector.

For eg:

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

If you use id, then you don't need to iterate:

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

answered Jan 14, 2015 at 14:05

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3693057 Over a year ago

Thank you very much for your help! I had forgotten that point ;)

Surjit Sidhu · Accepted Answer · 2017-05-10 12:26:08Z

0

simple html tag with data attribute

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

I added class to button to get by querySelector, then get data attribute same as below

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

answered May 10, 2017 at 12:26

Surjit Sidhu

3874 silver badges15 bronze badges

Collectives™ on Stack Overflow

Get data-attribute value with angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related