CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopeangularjs-controller
dm76
dm76

Reputation: 4240

How to access the scope of a parent's controller's in a directive's controller?

I have a custom directive nested in a parent div who's controller sets a variable value to its scope, such as:

html

<div ng-controller="mainCtrl">
    <p>{{data}}</p>
    <myDirective oncolour="green" offcolour="red" data="data"></myDirective>
</div>

javascript

app.controller("mainCtrl", function($scope){
   $scope.data= 1;
});

app.directive("myDirective", function() {
   return {
       restrict: 'E',
       scope: {
           oncolour: '@',
           offcolour: '@',
           data: '='
       },
       template: '<p>{{data}} is {{state}}</p>',
       controller: function($scope){

           console.log($scope.data); //undefined!

          /* logic to set $scope.state depending on $scope.data */

       };
   };
});

I can pass the value of data to the directive as I can see the {{data}} off the template being parsed correctly.

However, $scope.data is undefined in the directive's controller. I need to apply some logic there depending on this variable like if data==1, then state="on", else state="off", so I can then apply the oncolour and offcolour appropriately.

Any idea how this can be achieved?

Upvotes: 1

Views: 76

Answers (5)

Mat
Mat

Reputation: 2184

"transclude" options is necessary:

   transclude: true,
   controller: ['$scope', function($scope) {
       console.log($scope.data);
   }],

Upvotes: 2

cYrixmorten
cYrixmorten

Reputation: 7108

My bet is that the binding is failing as data is a primitive, see https://github.com/angular/angular.js/wiki/Understanding-Scopes

Try and change:

app.controller("mainCtrl", function($scope){
   $scope.data= 1;
});

And

<div ng-controller="mainCtrl">
    <p>{{data}}</p>
    <myDirective oncolour="green" offcolour="red" data="data"></myDirective>
</div>

Into: 

app.controller("mainCtrl", function($scope){
   $scope.data= {
      value: 1
   };
});

And

<div ng-controller="mainCtrl">
    <p>{{data.value}}</p>
    <myDirective oncolour="green" offcolour="red" data="data.value"></myDirective>
</div>

Upvotes: 0

marcel
marcel

Reputation: 3272

Check AngluarJS normalization.

The directive elements name is wrong: 

<myDirective ... >

It should be 

<my-directive ...>

And make sure to access scope instead of $scope.

Upvotes: 0

Farnabaz
Farnabaz

Reputation: 4066

change $scope to scope, take a look to angular directive documentation, goto end of page and check sample code 

app.directive("myDirective", function() {
   return {
       restrict: 'E',
       scope: {
           oncolour: '@',
           offcolour: '@',
           data: '='
       },
       template: '<p>{{data}} is {{state}}</p>',
       controller: function(scope){

           console.log(scope.data); //undefined!

          /* logic to set $scope.state depending on $scope.data */

       };
   };
});

Upvotes: 0

Shaohao
Shaohao

Reputation: 3511

You miss the $ before the scope in your directive. The reason you will have undefined is because in the directive $scope is not the same as return scope. You have to match them.

app.directive("myDirective", function() {
  return {
    restrict: 'E',
    $scope: {
       oncolour: '@',
       offcolour: '@',
       data: '='
    },
    template: '<p>{{data}} is {{state}}</p>',
    controller: function($scope){

       console.log($scope.data); //undefined!

      /* logic to set $scope.state depending on $scope.data */

    };
   };
});

Upvotes: 0

Related Questions