Question

我有指令和范围和数组的问题。我读过的是，如果我编写一个范围设置为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和insuranceSituationAmountList2。他们的工作方式不同。使用ng-repeat我在输入标签中写出数组，每个输入标签也有一个ng-model属性。

    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，数组insuranceSituationAmountList1也永远不会更新父范围。但是对于字段name1，它可以按我的意愿工作。当scope为false时，字段name1更新父范围，当范围设置为true时，它不会。

即使我在指令中将范围设置为true，数组insuranceSituationAmountList2也将始终更新父范围。但对于字段name2，它可以按我的意愿工作。。当scope为false时，field name2更新父范围，当scope设置为true时，则不会。

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

我认为这是我不理解的基本内容，但有人可以解释为什么我的数组不能正常工作。

（你可以读到我的第一个languange不是英文; - ））

Answer 1

确定..

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

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

所以..'获取'{{name}}例如会向上导航，直到找到带有名称的$ scope并显示它。但'setting'{{name ='Changed'}}不会在该范围内设置值。它会将其设置在第一个可用范围内。

但是......'获取'{{object.name}}会向上导航范围，直到找到一个名为object的对象，然后显示它的名称属性，并且'setting'{{object.name ='Changed'}}将首先显示需要'获取'“对象”（通过导航范围的层次结构）然后设置它的属性。哪个$ scope“对象”都会更新。

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

现在，在第一个指令中，我可以看到为什么在将scope设置为false时发生相反的情况会让人感到困惑..这是因为现在ng-model =“name1”与它的父节点在同一范围内并直接更新（没有$ scope层次结构）但是也要记住ng-repeat确实创建了一个范围！因为数组值不包含在对象中，仅在各个ng-repeat范围内更新。

使用此css查看范围：

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

我明白我可能没有解释得这么好（特别是如果英语不是你提到的第一语言），但希望更新的小提琴会有所帮助。

Highlighting the problem和Fixing the problem

如果你使用没有'。'的ng-model，那将有助于记住。（点）然后该值将仅在其最近的范围内更新。

更新： This article如果您从我的尝试中无法理解，可以帮助突出显示此问题

指令范围

1 个答案: