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

Isolated scope cannot access variables higher in the scope chain

本文关键字：作用域 变量 不能 访问 隔离      更新时间：2023-09-26

在有人把这个标记为重复之前，我在SO上发现了类似的问题:

  1. 隔离作用域变量未定义
  2. 无法在指令范围
    3. 中访问rootscope var

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

我有一个单独作用域的指令。在其post链接函数中，我试图访问一个恰好在根(最顶层)范围内的变量。在我孤立的范围内，我尝试了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在那里，因此var也可以通过当前作用域的$root访问。

我的问题是为什么'@'和'='在这种情况下不起作用?是因为var定义在链的更上层，而不是直接父变量，还是因为中间的父变量作用域本身就是一个孤立的作用域，破坏了对该变量的引用链?

如果你有一个孤立的作用域，你会想要传递给你的指令，无论它是你想要它用于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
相关文章：