为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

湖上湖 2019-10-30 13:04:22

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


范围继承通常是简单明了的,并且您通常甚至不需要知道它正在发生...直到您尝试将2路数据绑定(即表单元素,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>

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


查看完整描述

3 回答

?
慕仰1329654

一个很多的东西引入新的领域。假设在您的控制器中,您实际上要添加选项卡:第一个选项卡是实际的呈现,第二个选项卡是表单(以便您具有实时预览)。


您决定为此使用指令:


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


查看完整回答
反对 回复 2019-10-30
?
浮云间

假设您有范围M,A和B,其中M是A和B的父级。

如果(A,B)中的一个尝试写入M的范围,则它将仅适用于非原始类型。原因是非基本类型通过引用传递

另一方面,原始类型不是,因此尝试theText在M的作用域上进行写操作将分别在A或B的作用域上创建同名的新属性,而不是写入M。如果A和B都依赖于此属性,则会发生错误,因为它们中的任何一个都不知道另一人正在做什么。


查看完整回答
反对 回复 2019-10-30
?
慕雪9262066

是的,我从理论上有点理解这个问题,但是在实际中我看不出它如何影响这个简单的例子。例如,“如果A和B都依赖于此属性”,什么时候成立?在我的基础上建立一个示例非常好。

查看完整回答
反对 回复 2019-10-30

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信