CODEWITHSUNDEEP
javascriptangularjs
user3900456
user3900456

Reputation: 2003

How to get an element's attribute with AngularJS

I have the following code:

<div class="col-md-10" data-ng-controller="type-controller">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-success" ng-model="typeId" data-btn-radio="'1'">
            Option 1
        </label>
        <label class="btn btn-success" ng-model="typeId" data-btn-radio="'2'">
            Option 2
        </label>
    </div>
    <input data-ng-model="typeId" name="typeId" type="hidden" data-start="2" />
</div>

My type-controller is empty so I'm omitting it - but I want to get the value of the attribute data-start from the last input inside the type-controller.

I'm not using jQuery.

Upvotes: 1

Views: 494

Answers (2)

Josh
Josh

Reputation: 44906

IF the attribute data-start is significant because it is being used by some other 3rd party library, then you might consider simply using ng-init when you create this on the server:

<input data-ng-model="typeId" name="typeId" type="hidden" data-start="2" 
 ng-init='start = 2' />

This will essentially run any code you need, and doesn't involve you having to parse out data attributes from the DOM.

You could write a pretty trivial directive to pull in the value and publish using an expression. This will essentially accomplish the same thing, but is more difficult in my opinion:

angular.module('data-pluck', [])
  .controller('fooController', function() {

    this.name = 'Foo Controller';

  })
  .directive('pluckData', ['$parse',
    function($parse) {

      return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
          var expression = function() {};
          expression.assign = function() {};

          scope.$watch(attrs.placeData, function() {
            expression = $parse(attrs.placeData);
          });

          scope.$watch(attrs.pluckData, function() {
            expression.assign(scope, attrs[attrs.pluckData]);
          });
        }
      };

    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='data-pluck' ng-controller='fooController as ctrl'>
  <h1>{{ctrl.name}}</h1>
  <div data-my-val="I'm value one" pluck-data='myVal' place-data='ctrl.valueOne'>
    <p>I'm a regular old <code>&lt;p&gt;</code> tag</p>
    <input type='hidden' data-my-val="I'm the second value" pluck-data='myVal' place-data='ctrl.valueTwo' />
  </div>
  <h3>These Values Populated Dynamically</h3>
  <ul>
    <li>ctrl.valueOne = {{ctrl.valueOne}}</li>
    <li>ctrl.valueTwo = {{ctrl.valueTwo}}</li>
  </ul>
</div>

Upvotes: 1

user888734
user888734

Reputation: 3897

Angular comes with jqLite built in, which still has the attr() function. But it's not the Angular "way" to be manually fiddling around in the DOM from a controller. Your scope should be the interface between them.

I'm curious as to why you have a value in an attribute in your UI that isn't defined first in your model / scope? How does this value get changed? Is there a reason why you can't set it in the controller:

$scope.start = 2;

and then:

<input data-ng-model="typeId" name="typeId" type="hidden" data-start="{{start}}" />

Can you explain a little about what data-start is meant to do?

Upvotes: 1

Related Questions