请问我的NG-模型确实需要有一个点，以避免儿童$范围的问题？ [英] Does my ng-model really need to have a dot to avoid child $scope problems?

问题描述

据<一个href=\"https://github.com/angular/angular.js/wiki/Understanding-Scopes\">https://github.com/angular/angular.js/wiki/Understanding-Scopes,它尝试将数据绑定到连接到您的 $范围原语的一个问题：

According to https://github.com/angular/angular.js/wiki/Understanding-Scopes, it's a problem to try to data-bind to primitives attached to your $scope:

继承范围通常是简单的，你经常甚至不需要知道它正在发生......直到你尝试2路数据绑定（即表单元素，NG-模型）为原始（例如，数，字符串，布尔）从孩子域内父范围界定。它不工作的方式大多数人期望它应该工作。

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work.

的建议是

这与原语问题可以通过以下的最佳做法总有一种很容易地避免。在NG-模型

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models

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

---

Now, I have this very simple setup which violates these rules:

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;
    };
}

这真的是坏？这是怎么回事拧我过来在某些可怕的方式，当我开始尝试使用童工的范围，不知何故？

Is this really bad? Is this going to screw me over in some horrible way when I start trying to use child scopes, somehow?

我是否需要将其更改为类似

Do I need to change it to something like

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>

让我按照最佳做法？你可以给我什么具体的例子，后者会来救我的一些可怕的后果，这将是前present？

so that I follow the best practice? What concrete example can you give me where the latter will save me from some horrible consequence that would be present in the former?

推荐答案

一个的很多的推出新的领域。比方说，在你的控制器，你居然要添加标签：第一个选项卡是实际的渲染，第二个选项卡的形式（让你有一个实时的preVIEW）

A lot of things introduce new scopes. Let's say that in your controllers, you actually want to add tabs : first tab is actual rendering, second tab is the form (so that you have a real-time preview).

您决定使用一个指令为：

You decide to use a directive for that :

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

好了，知道吗？ ＆LT;翼片GT; 都有自己的适用范围，并打破了你的控制器之一！所以，当你编辑，棱角分明会做的JS是这样的：

Well, know what ? <tabs> has its own scope, and broke your controller one ! So when you edit, angular will do something like this in js :

$scope.theText = element.val();

这不会遍历原型链，试图将 theText 父母。

编辑：只是要清楚，我只使用标签为例。当我说A 很多的东西引入一个新的范围，我的意思是：NG-包括NG-来看，NG-开关，NG-控制器（当然）等

EDIT : just to be clear, I'm only using "tabs" as an example. When I say "A lot of things introduce a new scope", I mean it : ng-include, ng-view, ng-switch, ng-controller (of course), etc.

所以说：这可能并不需要的截至目前的，因为你还没有子作用域在该视图，但你不知道你是否要去添加子模板或不，这最终可能会修改 theText 自己，造成问题的原因。要面向未来的设计，始终遵循规则，你必须毫不令人惊讶。）

So : this might not be needed as of right now, because you don't yet have child scopes in that view, but you don't know whether you're gonna add child templates or not, which might eventually modify theText themselves, causing the problem. To future proof your design, always follow the rule, and you'll have no surprise then ;).

这篇关于请问我的NG-模型确实需要有一个点，以避免儿童$范围的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！