我的ng模型真的需要一个点来避免孩子的范围问题吗？

Question

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

范围继承通常很简单,你通常甚至不需要知道它正在发生......直到你尝试双向数据绑定(即表单元素,ng-模型)到一个原语(例如,数字,字符串, 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的范围,它将仅适用于非基本类型.原因是非原始类型通过引用传递.

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