Angular JS - 当ng-view中的一个输入和ng-include中的其他输入时更新ng-model

Question

此问题是Angular JS - Update input options with other input options

的扩展

我有两个ng-model输入（输入选项），一个位于ng-view内，另一个位于ng-include内。我想在更改时保持更新，因此两者显示的值始终相同。

当两个输入处于同一级别时，代码正在运行。当一个输入位于ng-include内时，我设法通过将$parent添加到ng-model范围来使其正常工作，但是当将其他输入放在ng-view内时我无法设置让它工作。您可以查看我的代码in this plunkr

Answer 1

编辑：我对之前的回答感到很有意思，因为它基本上是“你错了，按我的方式行事”，所以这里是对问题的解释。

你有一个设有ng-ctrl的div。这个div现在有一个范围，其实例为myCtrl。

ng-include创建一个子作用域，它继承自其父作用域（以前创建的myCtrl作用域）。此范围不会直接引用selectedCountry或国家/地区，但 angular会在找不到值时自动搜索父范围。 这很重要。 （这就是JavaScript原型继承的工作原理。更多信息here。）

你还有一个ng-view，你告诉你的路由提供者将其控制器设置为myCtrl。这意味着它将创建一个单独的myCtrl范围，该范围也是外部myCtrl范围的子节点。因为它是外myCtrl范围的子项，就像您的ng-include范围一样，angular通常会在其父项中搜索它在直接范围内找不到的属性。

然而，这是变得复杂的地方。在这种情况下，因为它也是myCtrl的另一个实例，它为自己创建了selectedCountry和countries的新属性，因此在引用时不需要在其父级中搜索属性他们。 Angular通过引用匹配对象，而不是通过深度对象比较，因此这些对象被认为是不同的并从列表A中选择某些内容将selectedCountry更改为对象的引用t列在清单B上。

这就是为什么你被迫使用$parent来尝试指向与它之外的范围相同的引用，ng-include通过其父级自动引用它。

您的代码的第二个问题是，当您使用$parent代表selectedCountry值时，不使用$parent代表countries }数组，因此它使用在子myCtrl上重新创建的对象数组来填充您的选择框。同样，即使对象具有相同的值，角度也会通过引用比较ng-options。因此，选择A上的Modor与选择B上的Modor不同。

作为补充说明，如果您未在$parent为menu.html和checkout.html设置selectedCountry，则可能会遇到第三个问题。虽然最初会搜索父项selectedCountry，但是如果你更改了select，它会在子范围上创建一个属性而不是冒泡到父级，因此从那时起它将不再匹配父级的版本selectedCountry。

所以，总而言之，你编码它的方式有两个选择。

废话选择：

• $parent.everything
• 这是$parent controllerAs修复所有内容（请不要这样做）

负责任的选择：

• 使用controllerAs来防止确定范围问题
• 以下Plunkr表示如何使用controllerAs
执行此操作

ng-controller="myCtrl as myCtrl"的简短指南是Plunkr

TL; DR;如果你不想阅读指南

• 在你的HTML中 - ＆gt; myCtrl.countries
• 同样在你的html中 - ＆gt; controllerAs: 'myCtrl'
• 如果是路线/指令，请设置此属性 - ＆gt; $scope.stuff
• 在您的控制器中，而不是this.stuff - ＆gt; this
  • 注意：$scope用于属性/功能分配。如果您使用$watch这样的$scope函数，则仍在{{1}}上完成。

就像额外提示一样，这是我的here用于角度编码。遵循这些准则，您的代码将是完美无暇的，并防止您遇到这些陷阱。