隔离作用域不能访问作用域链中更高的变量

Question

在有人将此标记为重复之前，我在 SO：上发现了类似的问题：

1. Isolate scope variable is undefined
2. unable to access rootscope var in directive scope

但特别是我的问题本身就是一个不同的问题。

我有一个独立范围的指令。在它的后链接函数中，我试图访问一个恰好位于根（最顶层）范围内的变量。在我的隔离范围内，我尝试过myVar: '@' 和myVar: '='，但它们都不起作用，myVar 在指令范围内是undefined。以下是我的指令的返回语句：

{
    restrict: 'E',
    replace: true,
    transclude: true,
    template: tmpl,

    scope: {
        myVar: '@'
    },

    link: {
        post: function ($scope) {
            // $scope.myVar is undefined
            // $scope.$root.myVar is defined
        }
    }
}

在我的控制台中，我记录了当前作用域对象，我可以将$parent 一直跟踪到根目录并看到 var 在那里，因此也可以通过当前作用域的 $root 访问 var .

我的问题是为什么'@' 和'=' 在这种情况下不起作用？是因为 var 在链中的定义高于直接父级，还是因为中间的某些父级作用域本身就是一个孤立的作用域并破坏了对该 var 的引用链？

Answer 1

如果您有一个独立的范围，您将希望将您希望它用于my-val 的任何内容传递给您的指令。举个简单的例子，假设我们的 html 中有这个：

 <my-test my-var='{{test}}'></my-test>

我们的主控制器将有一个名为 test 的范围变量。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.test = 'World';
});

因此，如果您注意到指令设置 my-var = {{test}}。

现在我们的指令范围变量myVar 将绑定到该值。

app.directive('myTest', function()  {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '<span>{{myVar}}</span>',

    scope: {
        myVar: '@'
    },

    link: {
        post: function (scope) {
            console.log(scope.myVar);
        }
    }
  }
});

这是一个简单的演示：http://plnkr.co/edit/rkbLJ0dJk4OrtyOD3c8w?p=preview