1

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.

3
  • possible duplicate of AngularJS - get element attributes values Commented Sep 29, 2014 at 17:11
  • I'm not using ng-click... is there another option? Commented Sep 29, 2014 at 17:14
  • What are you trying to do exactly? As has been said below, you shouldn't be fiddling with DOM in controllers. You should be using directives for that. Commented Sep 29, 2014 at 17:24

2 Answers 2

1

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>

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

Comments

1

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?

2 Comments

it's because the page is loaded from the server with a value set, and I want to set that value for the scope...
the value that is set in the data-start will be used to set the scope typeId

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.