Angularjs - how do i access directive attribute in controller

Question

I am new to angularjs and i am stuck in accessing directive attributes in controller.

Directive

<rating max-stars="5" url="url.json"></rating>

app.directive('rating', [function () {
    return {
        restrict: 'E',
        scope: {
            maxStars: '=',
            url: '@'
        },

    link: function (scope, iElement, iAttrs) {
     console.log(iAttrs.url); //works
}

controller

app.controller('ratingController', ['$scope', '$attrs' , '$http','$routeParams',function  ($scope,$attrs,$http,$routeParams) {


            console.log($attrs.url); //shows undefined

}]);

How do i access the url attribute in controller?

Which version of Angular are you using ? How are you using ratingController and $scope.rating ? How about a fiddle or plunkr ? — gkalpak
– gkalpak, Commented Jul 21, 2014 at 12:25
sorry,i updated the contoller. i just want to access the value of url attribute of directive in ratingcontroller — Arun
– Arun, Commented Jul 21, 2014 at 12:30

superjos · Accepted Answer · 2014-11-27 20:51:30Z

17

If you want to associate a controller with a directive, you can use the Directive Definition Object's controller property (either specifying the controller as a function or specifying the name of the controller (in which case it can be registered anywhere in your module)).

app.directive('rating', [function () {
    return {
        restrict: 'E',
        scope: {
            maxStars: '=',
            url: '@'
        },
        controller: 'ratingController'
    };
});

// Meanwhile, in some other file
app.controller('ratingController', function ($scope, $element, $attrs) {
    // Access $attrs.url
    // Better yet, since you have put those values on the scope,
    // access them like this: $scope.url
    ...
});

When using two-way data-binding via =, the corresponding attribute's value should not be a literal (because you can't have two-way data-binding to a literal), but a string specifying the name of a property in the current scope.

Using <rating max-stars="5"... together with scope: {maxStars: '='... is wrong.
You hould either use <rating max-stars="5"... and scope: {maxStars: '@'...
or <rating max-stars="someProp"... and scope: {maxStars: '='... while the enclosing scope has a property named someProp with a numeric value (e.g. $scope.someProp = 5;).

edited Nov 27, 2014 at 20:51

superjos

12.8k6 gold badges94 silver badges143 bronze badges

answered Jul 21, 2014 at 12:43

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

3 Comments

Arun Over a year ago

yes i tried this, but when i console.log($scope.url) it shows undefined

gkalpak Over a year ago

@Arun: It could be due to several reasons (a simple typo, a timing issue (where the version of Angular plays a role, since some things have changed between version regarding when stuff is evaluated), misconfiguration etc). Please, provide a fiddle (or at the very least an SSCCE).

Jared Eitnier Over a year ago

I never knew this was possible until just now.. Thanks!

Wottensprels · Accepted Answer · 2014-07-21 12:39:31Z

3

app.directive('myDirective',function(){

  return{

    controller: function($scope,$attrs){
        console.dir($attrs);
    }

  }

});

That's it. If you want to access the elements attributes on a controller, you have to set up a controller for the directive.

(You could however, use a shared service to make those attributes available to another controller, if that's want you want to achieve)

edited Jul 21, 2014 at 12:39

answered Jul 21, 2014 at 12:33

Wottensprels

3,3273 gold badges31 silver badges39 bronze badges

7 Comments

Arun Over a year ago

ok,that makes sense. but if i have controller in separate file, how do i access from there? i did not downvote your answer

gkalpak Over a year ago

controller is an "injectable" function. The parameters are passed through DI (not potitionally), thus element and attrs will be undefined. A directive's controller function is not like the linking functions.

Wottensprels Over a year ago

So you want to share your alements attributes with another controller? Is that controller asociated with a directive? Or is it used for a view?

Wottensprels Over a year ago

@ExpertSystem is correct, I forgot to cut those out. You can, however, use the injectable $attrs

gkalpak Over a year ago

@Arun: It is really unclear what you are trying to achieve. Why don't you create a fiddle or plunkr demonstrating the problem, so we stop guessing and provide a "real" solutino instead :)

|

user1364910 · Accepted Answer · 2014-07-21 12:54:38Z

http://jsbin.com/xapawoka/1/edit

Took your code and made a jsBin out of it. I can't see any problems whatsoever, so I'm assuming this is a simple typo somewhere in your code (could be the stray [ bracket at the top of your directive definition).

Here's the code:

var app = angular.module('app', []);

app.controller('ratingController', 
  function ($scope, $element, $attrs) {
  console.log('ctrl.scope', $scope.url);
  console.log('ctrl.attrs', $attrs.url);
});

app.directive('rating', function () {
  return {
    restrict: 'E',
    scope: {
      maxStars: '=',
      url: '@'
    },
    controller: 'ratingController',
    link: function (scope, el, attrs) {
      console.log('dir.scope', scope.url);
      console.log('dir.attrs', attrs.url);
    }
  };   
});

And here's the output:

http://cl.ly/image/031V3W0u2L2w

user2422960 · Accepted Answer · 2014-07-21 12:25:53Z

0

ratingController is not asociated with your directive. Thus, there is no element which can hold attributes bound to that controller.

If you need to access those attributes, the link function is what you need (as you already mentioned above)

What exactly do you want to achieve?

answered Jul 21, 2014 at 12:25

user2422960

1,5266 gold badges17 silver badges28 bronze badges

1 Comment

Arun Over a year ago

sorry, i updated the question. I want to access the value of url attribute in controller.

Collectives™ on Stack Overflow

Angularjs - how do i access directive attribute in controller

4 Answers 4

3 Comments

7 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

7 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related