AngularJS - Scope value not accessible in the directive Scope

Question

I have created a directive :-

return {
        restrict: 'EAC',
        scope: {
            statesActive: '='
        },            
        link: function (scope, element, attrs) {
        var stateData = scope.statesActive.states; // Don't get data here
        ....
}

My Html :-

<gt-map states-active="states"></gt-map>

Controller :-

$scope.statesList = function () {
        var query = {
            status: 'active'
        }

        StatesList.query(query).$promise.then(function (states) {
            $scope.states = states;
        });
    };

I get data in states like this :-

$scope.states = "{states:[{ 'state' : 'CA', 'color' : '#61c419']}";

How to get the Controller scope value in directive?

-----Added-----

This is what i see in console.log(scope) in my directive :-

enter image description here

Try $scope.states = JSON.parse('{"states":[{ "state" : "CA", "color" : "#61c419"}]}') — iperelivskiy
– iperelivskiy, Commented Apr 10, 2014 at 5:11
$scope.states is string in controller. change it as $scope.states = {states:[{ 'state' : 'CA', 'color' : '#61c419'}]}; — Alborz
– Alborz, Commented Apr 10, 2014 at 5:18

Miraage · Accepted Answer · 2014-04-10 04:50:03Z

1

return {
        restrict: 'EAC',
        scope: {
            statesActive: '='
        },            
        link: function (scope, element, attrs) {
        var stateData = angular.fromJson(attrs.statesActive).states; // Probably, your "states" model here
        ....
}

answered Apr 10, 2014 at 4:50

Miraage

3,4943 gold badges28 silver badges43 bronze badges

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

6 Comments

Anup Over a year ago

When i console log attrs.statesActive i get states

Miraage Over a year ago

And what is your problem? :)

Anup Over a year ago

i should get scope.states value i.e. {states:[{ 'state' : 'CA', 'color' : '#61c419'}]}.... but i only get string states.

Miraage Over a year ago

Rly interesting, checking out.

Miraage Over a year ago

access "scope.statesActive".

|

Brocco · Accepted Answer · 2014-04-10 05:23:52Z

1

A slight tweak to the fiddle was referenced in a comment to another answer that now shows the retrieval of states within the directive's link function via its scope:

link: function (scope, element, attrs) {            
    var stateData = $parse(scope.statesActive)();
    console.log(stateData);
}

by stating:

scope: { statesActive: '=' }

you are binding your directive's scope to the attribute named states-active so all you have to do reference it inside the directive is to use

scope.statesActive

this will get the value as a string, you can use the $parse service to get the value of your object

edited Apr 10, 2014 at 5:23

answered Apr 10, 2014 at 5:08

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

1 Comment

Brocco Over a year ago

I apologize, the orig fiddle was using an alert which shows the value as a string, but by using parse you can get the value as an object, see the updated fiddle, and note that you need to inject in $parse to your directive

Fizer Khan · Accepted Answer · 2014-04-10 05:38:59Z

You have mistakes in $scope.states. It must be an object, not a string.

Following code works

JS

angular.module('myApp', []);
angular.module('myApp').directive('gtMap', 
    function() {
      return {
          restrict: 'EAC',
          scope: {
              statesActive: '='
          },            
          link: function (scope, element, attrs) {
              var stateData = scope.statesActive.states;
              // Don't get data here
              console.log(scope.statesActive);
          }
       }
    }
  );

angular.module('myApp').controller('MyCtrl', 
    function($scope) {
        // If states is a string got from database, use angular.fromJson(json) to parse. 
        // $scope.states = angular.fromJson(response); 
        $scope.states = {states:[{ 'state' : 'CA', 'color' : '#61c419'}]};

    });

HTML

<div  ng-app="myApp">
    <div ng-controller="MyCtrl">
            <gt-map states-active="states"></gt-map>
    </div>
</div>

Check out this jsfiddle http://jsfiddle.net/fizerkhan/69Pq9/1/

Jonathan · Accepted Answer · 2014-04-10 04:41:42Z

0

Try using this to access your scope.

return {
    ...
    link: function (scope, element, attrs) {
        ....
        scope.$parent.$parent.YourVariable;
    }
};

And I think you need to change your HTML to this:

<gt-map states-active="states"></gt-map>

answered Apr 10, 2014 at 4:41

Jonathan

5581 gold badge8 silver badges18 bronze badges

1 Comment

Anup Over a year ago

Tried this but..No Luck..!

score 0 · Accepted Answer · 2014-04-10 05:45:07Z

0

inject $parse in your directive.... try this...

 angular.module('myApp').directive('gtMap', ['$parse',
    function($parse) {
      return {
          restrict: 'EAC',

          link: function (scope, element, attrs) {
              var fieldGetter = $parse(attrs.statesActive);
              console.log(fieldGetter)
                var field = fieldGetter(scope);
              //var stateData = scope.statesActive.states;
              // Don't get data here
              console.log(field)
          }
       }
    }
  ]);

edited Apr 10, 2014 at 5:45

answered Apr 10, 2014 at 4:34

user3201167

2 Comments

Anup Over a year ago

This is what i get in my console for fieldGetter : - function (self, locals) { return (getter(self, locals)); }

user3201167 Over a year ago

dont use isolate scope : scope:{statesActive: '='} and comment out the 'console.log(fieldGetter)'...sorry i forgot to do that

Alborz · Accepted Answer · 2014-04-10 06:35:27Z

0

scope.statesActive is an array so you need to access it as follows

var stateData = scope.statesActive[0].states;

answered Apr 10, 2014 at 6:35

Alborz

6,9333 gold badges26 silver badges37 bronze badges

2 Comments

Anup Over a year ago

It gives me error in console....TypeError: Cannot read property 'states' of undefined

Anup Over a year ago

see this stackoverflow.com/questions/22978663/…

Collectives™ on Stack Overflow

AngularJS - Scope value not accessible in the directive Scope

6 Answers 6

6 Comments

1 Comment

Comments

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

1 Comment

Comments

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related