如何在指令的控制器中访问父级控制器的范围？

Question

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?

Answer 1

"transclude" options is necessary:

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

Answer 2

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 */

    };
   };
});

Answer 3

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 */

       };
   };
});

Answer 4

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>

Answer 5

Check AngluarJS normalization .

The directive elements name is wrong:

<myDirective ... >

It should be

<my-directive ...>

And make sure to access scope instead of $scope.