为啥 AngularJS 文档不在模型指令中使用点？

Posted 2023-02-19

【中文标题】为啥 AngularJS 文档不在模型指令中使用点？

【英文标题】：Why don't the AngularJS docs use a dot in the model directive?为什么 AngularJS 文档不在模型指令中使用点？

【发布时间】：2013-07-10 12:36:21

【问题描述】：

在视频AngularJS MTV Meetup: Best Practices (2012/12/11) 中，Miško 解释说“..如果您使用 ng-model，则某处必须有一个点。如果您没有一个点，那么您做错了..”

但是，Angular.JS website 中的第一个示例（基础知识）似乎与此相矛盾。是什么赋予了？自 MTV 聚会以来，Angular.JS 是否发生了变化，现在它对 ng-model 更加宽容了？

【问题讨论】：

我个人认为这更像是一个关于建模系统的哲学问题。有些人使用$scope 作为视图模型，而其他人则没有。这是一个偏好问题。

见***.com/questions/15623698/…

【参考方案1】：

当您原型从另一个范围继承一个范围时，将需要点，例如在 ng-repeat 的情况下，将为原型从父范围继承的每个行项目创建一个新范围。在基本示例中，没有原型继承，因为只有一个范围，但是如果您有多个子范围，那么您将开始面临问题。下面的链接会让一切变得清晰。

https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-repeat

【参考方案2】：

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

egghead.io video "The Dot" 的概述非常好，这个非常流行的堆栈溢出问题也是如此：What are the nuances of scope prototypal / prototypical inheritance in 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>

(Play along on a JSFiddle)

首先，如果您启动应用程序，并在父输入中键入内容，子输入会更新以反映它。

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

发生这种情况的原因是因为子作用域使用原型继承来查找值，所以只要它永远不会在子作用域上设置，那么它将遵循父作用域。但是，一旦设置，它就不再查找父级。

当您改用对象 (baz) 时，不会在子作用域上设置任何内容，并且继承仍然存在。

如需更多详细信息，请查看*** answer

【讨论】：

那个蛋头视频值得它的黄金重量。有史以来对这个问题的最佳描述。

多么简洁的总结——太棒了。

我是唯一一个认为添加任意容器变量非常丑陋的人吗？我理解为什么这是一种“最佳实践”，但是看到包含实际重要内容的随机变量是如此难看。出于这个原因，我实际上倾向于避免这种“最佳实践”。我不经常遇到任何问题，因为我知道后果。在一年多的密集角度开发中，我没有被这个咬过。

@Spencer 我的经验法则是：如果它是纯 UI（例如，不依赖于控制器或服务的可见性状态），那么我使用***范围变量。但除此之外，一切都存在于控制器（使用controllerAs 和bindToController 语法）或服务上，执行点。

【参考方案3】：

所以要解决这个问题，请确保在 JS 中首先声明父级：

例如

$scope.parent

接着是：

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

只做孩子没有父母会破坏 Angular。

【参考方案4】：

根据@OverZealous 的回答，我想出了一个肮脏但舒适简单且快速的解决方法：

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

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

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

我在我的项目中为这些肮脏的工作写了一个服务。