我的 ng-model 真的需要有一个点来避免子 $scope 问题吗? [英] Does my ng-model really need to have a dot to avoid child $scope problems?

问题描述

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

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-model)绑定到一个基元(例如，数字, string, boolean) 在子作用域内在父作用域上定义.它不像大多数人期望的那样工作.

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-models

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>

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

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?

推荐答案

很多 引入了新的作用域.假设在您的控制器中，您实际上想要添加选项卡:第一个选项卡是实际渲染，第二个选项卡是表单(以便您进行实时预览).

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).

您决定为此使用指令:

<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 中做这样的事情:

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.

which will not traverse the prototype chain to try and set theText on parents.

为了清楚起见，我仅以标签"为例.当我说很多东西引入了一个新的作用域"时，我的意思是:ng-include、ng-view、ng-switch、ng-controller(当然)等.

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-model 真的需要有一个点来避免子 $scope 问题吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！