AngularJS-解释为什么转置的作用域必须是孤立作用域的同级_Angularjs_Angularjs Directive

AngularJS-解释为什么转置的作用域必须是孤立作用域的同级

angularjs

AngularJS-解释为什么转置的作用域必须是孤立作用域的同级,angularjs,angularjs-directive,Angularjs,Angularjs Directive,在本节中，有以下一段：然而，隔离作用域会产生一个新问题：如果一个转置的DOM 小部件隔离作用域的子部件将无法绑定什么都可以。由于这个原因，被转移的作用域是原始范围，在小部件为其创建独立范围之前局部变量。这使得被转移和小部件隔离了作用域兄弟姐妹有人能解释一下为什么“如果转置的DOM是小部件隔离作用域的子对象，那么它将无法绑定到任何东西”想象一下您有这样的标记： <html ng-app="myApp"> <body> <div ng-contr

在本节中，有以下一段：

然而，隔离作用域会产生一个新问题：如果一个转置的DOM 小部件隔离作用域的子部件将无法绑定什么都可以。由于这个原因，被转移的作用域是原始范围，在小部件为其创建独立范围之前局部变量。这使得被转移和小部件隔离了作用域兄弟姐妹

有人能解释一下为什么“如果转置的DOM是小部件隔离作用域的子对象，那么它将无法绑定到任何东西”

想象一下您有这样的标记：

<html ng-app="myApp">
  <body>
    <div ng-controller="myController">
      <div ng-repeat="item in items">
        <div my-widget>
          {{item.name}}
        </div>
      </div>
    </div>
  </body>
</html>

您可以从范围中读取任意级别以上的值，因为它们使用原型继承相互继承。{{item}}不存在于小部件范围中，但它存在于父ng repeat范围中，因此可以找到它

如果使用隔离作用域，则会得到一个全新的作用域，它不会继承任何内容。因此，如果

mywidget

使用

scope:{}

例如，作用域树看起来更像：

$rootScope
└controller scope
  └ng-repeat scope
widget scope

然后在双卷发中，“项目”是未知的。使用转换，您可以将作用域设置为同级，如下所示：

$rootScope
└controller scope
  └ng-repeat scope
    └widget contents
widget scope

提到的另一个微妙之处是，如果转置内容的作用域是指令的子项，则指令可能会删除转置内容试图在父项作用域中引用的任何变量。例如：

<body ng-controller="MainCtrl">
<my-directive>{{ name }}</my-directive>
</body>


{{name}}

JS:

app.controller（“MainCtrl”，函数（$scope）{
$scope.name='foo'；
});
app.directive（“myDirective”，function（））{
返回{
作用域：{}，
是的，
模板：“”，
控制器：功能（$scope）{
$scope.name='bar'；
}
}
});

转换确保指令中的{{name}}引用'foo'而不是'bar'。

对我来说，让它被删除更有意义。如果我能在没有排除的情况下重击它，为什么我会因为排除它而突然想要改变这种行为？我可能是因为一个原因而试图破坏它，我认为我们的假设是转换更多地用于库和可重用组件。您可能不想担心名称空间与您正在使用的各种库之间的冲突，而转换为您解决了这一问题。

<body ng-controller="MainCtrl">
<my-directive>{{ name }}</my-directive>
</body>

app.controller("MainCtrl", function($scope) {
    $scope.name = 'foo';
});

app.directive("myDirective", function() {
    return {
        scope: {},
        transclude: true,
        template: '<span ng-transclude></span>',
        controller: function($scope) {
            $scope.name = 'bar';
        }
    }
});