CODEWITHSUNDEEP
javascriptangularjs
Arun
Arun

Reputation: 1528

Angularjs - how do i access directive attribute in controller

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?

Upvotes: 9

Views: 19953

Answers (4)

gkalpak
gkalpak

Reputation: 48211

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

Upvotes: 17

user1364910
user1364910

Reputation:

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

Upvotes: 1

Wottensprels
Wottensprels

Reputation: 3327

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)

Upvotes: 3

user2422960
user2422960

Reputation: 1526

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?

Upvotes: 0

Related Questions