我的 ng-model 真的需要一个点来避免子 $scope 问题吗？

Question

根据https://github.com/angular/angular.js/wiki/Understanding-Scopes，尝试将数据绑定到附加到$scope 的原语是一个问题：

范围继承通常很简单，而且您通常甚至不需要知道它正在发生...直到您尝试将 2 路数据绑定（即，表单元素，ng-model）到基元（例如，数字, string, boolean) 从子作用域内定义在父作用域上。它并没有像大多数人期望的那样工作。

建议是

遵循始终使用 '.' 的“最佳实践”，可以轻松避免原语的这个问题。在你的 ng 模型中

---

现在，我有一个违反这些规则的非常简单的设置：

HTML：

<input type="text" ng-model="theText" />
<button ng-disabled="shouldDisable()">Button</button>

JS：

function MyController($scope) {
    $scope.theText = "";
    $scope.shouldDisable = function () {
         return $scope.theText.length >= 2;
    };
}

这真的很糟糕吗？当我开始尝试使用子范围时，这会以某种可怕的方式把我搞砸吗？

---

我需要把它改成类似的东西吗

function MyController($scope) {
    $scope.theText = { value: "" };
    $scope.shouldDisable = function () {
         return $scope.theText.value.length >= 2;
    };
}

和

<input type="text" ng-model="theText.value" />
<button ng-disabled="shouldDisable()">Button</button>

以便我遵循最佳实践？你能给我什么具体的例子，后者可以让我免于前者会出现的可怕后果？

Answer 1

很多东西都引入了新的作用域。假设在您的控制器中，您实际上想要添加选项卡：第一个选项卡是实际渲染，第二个选项卡是表单（以便您实时预览）。

您决定为此使用指令：

<tabs>
  <tab name="view">
    <pre>{{theText|formatInSomeWay}}</pre>
  </tab>
  <tab name="edit" focus="true">
    <input type="text" ng-model="theText" />
  </tab>
</tabs>

嗯，知道吗？ <tabs> 有它自己的作用域，并且把你的控制器弄坏了！所以当你编辑时，Angular 会在 js 中做这样的事情：

$scope.theText = element.val();

它不会遍历原型链来尝试在父母身上设置theText。

编辑：为了清楚起见，我只使用“标签”作为示例。当我说“很多东西引入了一个新的范围”时，我的意思是：ng-include、ng-view、ng-switch、ng-controller（当然）等等。

所以：目前可能不需要，因为您在该视图中还没有子范围，但您不知道是否要添加子模板或不是，这最终可能会自己修改theText，从而导致问题。为了将来证明您的设计，请始终遵循规则，然后您就不会感到惊讶了；）。

Answer 2

假设您有作用域 M、A 和 B，其中 M 是 A 和 B 的父级。

如果 (A,B) 之一尝试写入 M 的作用域，它将仅适用于 非原始 类型。原因是非原始类型通过引用传递。

另一方面，原始类型不是，因此尝试在 M 的作用域上写入 theText 将分别在 A 或 B 的作用域上创建一个同名的新属性，而不是写入 M。如果两个 A和 B 依赖于这个属性，就会发生错误，因为他们中的任何一个都不知道另一个人在做什么。