如何在指令的控制器中訪問父級控制器的范圍？

Question

我有一個嵌套在父div中的自定義指令，該父div的控制器將變量值設置為其范圍，例如：

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

       };
   };
});

我可以將data的值傳遞給指令，因為可以看到正確解析的模板中的{{data}} 。

但是， $ scope.data在指令的控制器中未定義。 我需要根據此變量在其中應用一些邏輯，例如， 如果data == 1，則為state =“ on”，否則為state =“ off” ，因此我可以適當地應用上色和下色 。

知道如何實現嗎？

Answer 1

“ transclude”選項是必需的：

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

Answer 2

您在指令中的作用域之前錯過了$ 。 之所以未定義，是因為指令$scope與return scope 。 您必須匹配它們。

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

改變$scope到scope ，看看對角指令文檔 ，頁面轉到結束，並檢查示例代碼

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

我敢打賭，綁定失敗，因為數據是原始數據，請參閱https://github.com/angular/angular.js/wiki/Understanding-Scopes

嘗試更改：

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

和

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

成：

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

和

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

Answer 5

檢查AngluarJS 規范化 。

指令元素名稱錯誤：

<myDirective ... >

它應該是

<my-directive ...>

並確保訪問作用域而不是$ scope。