CODEWITHSUNDEEP
javascriptangularjs
Anup
Anup

Reputation: 9746

AngularJS - Scope value not accessible in the directive Scope

FIDDLE

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

Upvotes: 0

Views: 1145

Answers (6)

Alborz
Alborz

Reputation: 6913

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

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

Upvotes: 0

user3201167
user3201167

Reputation:

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)
          }
       }
    }
  ]);

Upvotes: 0

Fizer Khan
Fizer Khan

Reputation: 92895

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/

Upvotes: 1

Brocco
Brocco

Reputation: 65043

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

Upvotes: 1

Miraage
Miraage

Reputation: 3464

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

Upvotes: 1

Jonathan
Jonathan

Reputation: 558

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>

Upvotes: 0

Related Questions