一尘不染

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

angularjs

根据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>

以便我遵循最佳做法?您能给我一个具体的例子吗,后者将使我免于前者带来的可怕后果?


阅读 203

收藏
2020-07-04

共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自己,从而导致问题。为了将来验证您的设计,请始终遵守该规则,然后您就不会感到惊讶了;)。

2020-07-04