指令中的范围

Scope in directives

本文关键字：范围 指令      更新时间：2023-09-26

我对指令、作用域和数组有问题。我读到的是，如果我写一个指令，其中作用域设置为true，我会得到一个与父作用域分离的新作用域。在这里，您可以看到我的示例中的两个指令。我的每个阵列一个。

   kdApp.directive('kdinsurancesituationamount', function kdinsurancesituationamount() {
   return {
          restrict: 'E',
          scope: true,
          template: "<span>Name  </span> " +
              "<input value='{{name1}}' ng-model='name1'>" +
              "<div ng-repeat='isa in insuranceSituationAmountList1'>" +
              "<span>Amount {{$index}} </span> " +
              "<input value='{{isa}}' ng-model='isa'>" +
              " <br /></div>"
      };
  });
kdApp.directive('kdinsurancesituationamount2', function kdinsurancesituationamount2() {
      return {
          restrict: 'E',
          scope: true,
          template: "<span>Name  </span> " +
              "<input type='text' maxlength='9' value='{{name2}}' ng-model='name2'>" +
              "<div ng-repeat='isa in insuranceSituationAmountList2'>" +
              "<span>Index {{$index}} </span> " +
              "<input type='text' maxlength='9' value='{{isa.amount}}' ng-model='isa.amount'>" +
              " <br /></div>"
      };
  });

当我有像$scope.name1="John"这样的变量时，它工作得很好，但当我有数组时，我不明白它是如何工作的。请在此处查看我的控制器。我有两个不同的例子，insuranceSituationAmountList1和insuranceCituationAmoountList2。它们的工作方式不同。使用ng repeat，我在输入标记中写出数组，每个输入标记也有一个ng模型属性。

    kdApp.controller('InsuranceSituationAmountController', function ($scope) {
      $scope.insuranceSituationAmountList1 = ["1000", "2000", "3000"];
      $scope.insuranceSituationAmountList2 = [{
          amount: "4000"
      }, {
          amount: "5000"
      }, {
          amount: "6000"
      }];
      $scope.name1 = "John";
      $scope.name2 = "John";
  });

即使我在指令中将作用域设置为false，数组insuranceStateAmountList1也永远不会更新父作用域。但对于域名1，它按我的意愿运行。当scope为false时，字段名称1会更新父作用域，而当scope设置为true时则不会。

即使我在指令中将作用域设置为true，数组insuranceStateAmountList2也将始终更新父作用域。但对于域名2，它可以随心所欲。当scope为false时，字段名称2会更新父作用域，而当scope设置为true时则不会。

我有一个jsfiddle，你可以在那里看到它是如何工作的http://jsfiddle.net/uhlrog/Lzcqeruw/66/因此，如果您有时间测试它，首先使用scope:true并更改为scope:false，然后更改输入框中的内容。

我想这是我不理解的基本问题，但有人能为我解释为什么我的数组不能很好地工作吗。

（正如你所读到的，我的第一语言不是英语；-）

好的。。

首先你需要了解这个基本原理：

当"获取"范围值angular时，它将在层次结构中向上导航，直到找到为止。但是，当"设置"属性时，它只会将其放置在当前作用域上。（这是基于javascript继承的工作方式，而不是angular的错误，所以不要责怪他们。）

所以…'例如，获取"｛｛name｝｝"将向上导航，直到找到具有名称的$scope并将其显示。但是"setting"｛{name＝"Changed"｝不会设置该作用域的值。。它将把它设置在第一个可用的作用域上。。

然而…'获取"｛｛object.name｝｝"将向上导航作用域，直到找到一个名为object的对象，然后显示其名称属性，而"设置"｛{object.name="Changed"｝将首先需要"获取"object"（通过向上导航范围的层次结构），然后设置其属性。将在$scope"对象"所在的任何位置更新。

现在，如果你理解了这一点，它可能有助于解释发生了什么，这就是为什么ng repeat在指令的第二个版本中更新了正确的值。

现在，在第一个指令中，我可以理解为什么当您将scope设置为false时，会出现相反的情况，这令人困惑。。这是因为现在ng model="name1"与其父级在同一范围内，并直接更新（没有$scope层次结构），但也要记住，ng repeat确实创建了一个范围！。因此，因为数组值不包含在对象中，所以只在单个ng重复作用域上更新。

使用此css查看作用域：

.ng-scope {
    border: 1px red solid;
}

我知道我可能没有很好地解释这一点（尤其是如果你提到的英语不是你的第一语言），但希望更新的小提琴会有所帮助。。

突出问题并修复问题

这有助于记住，如果您使用没有"的ng模型（点），则该值将仅在其最近的范围内更新。

更新时间：如果您不理解我的尝试

，本文将用图表来强调这个问题
相关文章：