为什么AngularJS文档在model指令中不使用点?


70

在视频AngularJS MTV聚会:最佳实践( 2012/12/11 )中,Miško解释说:“ ..如果您使用ng-model,则必须在某处添加点。如果您没有点,那么您就在做错误..”

但是,Angular.JS网站中的第一个示例(基础知识)似乎与此矛盾。是什么赋予了?自从MTV聚会以来,Angular.JS是否已更改,因为它现在对ng-model更宽容了?


我个人认为这更像是关于系统建模的哲学问题。有些人将其$scope用作视图模型,而其他人则没有。这是一个优先事项。
yuxhuang

Answers:


109

在处理范围继承的复杂性时,这个小点非常重要。

egghead.io视频“点”有一个很好的概述,做到这一点非常流行的堆栈溢出的问题:什么是范围原型/原型继承中AngularJS的细微差别?

我将在这里尝试总结一下:

Angular.js使用范围继承来允许子范围(例如子控制器)查看父范围的属性。因此,假设您有一个类似的设置:

<div ng-controller="ParentCtrl">
    <input type="text" ng-model="foo"/>
    <div ng-controller="ChildCtrl">
        <input type="text" ng-model="foo"/>
    </div>
</div>

在JSFiddle上玩

首先,如果您启动了该应用程序,并输入了父输入,则子代将进行更新以反映它。

但是,如果您编辑子作用域,则与父作用域的连接现在断开,并且两者不再同步。另一方面,如果使用ng-model="baz.bar",则链接将保留。

发生这种情况的原因是,子作用域使用原型继承来查找值,因此,只要它从未在子作用域上设置,就将遵从父作用域。但是,一旦设置,它将不再查找父级。

当您使用对象(baz)时,子作用域上一无所有,继承关系仍然保留。

有关更多详细信息,请查看StackOverflow答案


3
那个蛋头视频值得它重金。对此问题的最佳描述。
Ben Barreth,2014年

简短的摘要-太棒了。
drjimmie1976

1
我是唯一认为添加任意容器变量非常丑陋的人吗?我理解为什么这是“最佳实践”,但是看到包含实际重要内容的随机变量是如此丑陋。因此,我实际上倾向于避免这种“最佳实践”。我通常不会遇到任何问题,因为我意识到后果。在过去一年的密集角度开发中,我一直没有对此感到难过。
斯宾塞

@Spencer我的经验法则是:如果它仅是UI(例如,不依赖于控制器或服务的可见性状态),那么我将使用顶级范围变量。但除此之外,所有内容都存在于执行点的控制器(带有controllerAsbindToController语法)或服务上。
OverZealous 2015年


0

因此,要解决此问题,请确保在JS中先声明父对象:

例如

$scope.parent

其次是:

$scope.parent.child = "Imma child";

仅在没有父母的情况下做孩子会破坏Angular。


0

根据@OverZealous的回答,我为此想到了一个肮脏但轻松自如的快速解决方法:

$scope.$s = $scope
$scope.foo = 'hello'

然后$s在模板中使用可以安全地修改模型:

<input ng-model="$s.foo"/>

我为我的项目中的此类肮脏作品编写了服务。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.