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

Question

根据https://github.com/angular/angular.js/wiki/Understanding-
Scopes的
说法，尝试将数据绑定到附加到您的基本体上是一个问题$scope：

范围继承通常是简单明了的，并且您通常甚至不需要知道它的发生……直到您尝试将2-way数据绑定（例如，表单元素，ng-
model）绑定到基元（例如，数字，字符串，布尔值）从子作用域内部在父作用域上定义。它不能像大多数人期望的那样工作。

建议是

通过遵循始终具有“’”的“最佳实践”，可以很容易地避免使用基元出现此问题。在您的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自己，从而导致问题。为了将来验证您的设计，请始终遵守该规则，然后您就不会感到惊讶了；）。