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

【问题标题】：How to access the scope of a parent's controller's in a directive's controller?如何在指令的控制器中访问父控制器的范围？
【发布时间】：2015-11-21 22:05:31
【问题描述】：

我有一个自定义指令嵌套在父 div 中，其控制器将变量 value 设置为其范围，例如：

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 在指令的控制器中是未定义的。我需要根据这个变量应用一些逻辑，例如 if data==1, then state="on", else state="off"，所以我可以应用 oncolour 和 offcolour 适当。

知道如何实现吗？

【问题讨论】：

我最好的选择是，当您直接传递数据时，变量会被隐藏（不知道它的内容）。您介意尝试将数据包装在对象文字中吗？然后在您的 HTML 中将其作为 data="wrapper.data"
哦，对不起，我当然可以看到数据的内容：-D 我的错。不过仍然坚持我的理论。另一个更昂贵的选择是在指令中添加对数据的监视。不过应该没有必要。
我会使用链接功能并访问 attr、elem 和 scope。通过scope.data访问数据
@marcel scope.data 在链接函数中也未定义

标签： javascript angularjs angularjs-directive angularjs-scope angularjs-controller

【解决方案1】：

“transclude”选项是必要的：

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

【讨论】：

看小提琴
啊...谢谢。奇怪的是它对我不起作用......我能看到的唯一区别是你添加了一个嵌入：是的
如果使用链接则不需要转置，否则可以
Link 不会继续寻找范围内的变化，这意味着你必须为它设置一个手表。也不喜欢嵌入，不是这种情况下应该需要的东西。
在这种情况下是的。更新了答案，只留下这个案例的最佳回复

【解决方案2】：

您错过了指令中范围之前的$。您将有未定义的原因是因为在指令中$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 */

    };
   };
});

【讨论】：

如果我这样做，$scope.data 仍然是未定义的，并且指令模板中的 {{data}} 甚至不会被解析

【解决方案3】：

将$scope更改为scope，查看angular directive documentation，转到页面末尾并查看示例代码

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

       };
   };
});

【讨论】：

【解决方案4】：

检查 AngluarJS normalization.

指令元素名称错误：

<myDirective ... >

应该是

<my-directive ...>

并确保访问范围而不是 $scope。

【讨论】：

【解决方案5】：

我敢打赌，绑定失败，因为数据是原始数据，请参阅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>

【讨论】：

刚刚尝试按照此处的建议将原语包装在一个对象中。似乎没有改变任何东西...... $scope.data 仍然未定义