Question

我已经阅读了几个关于Angular $范围的SO响应以及它是如何是一个普通的旧JavaScript对象，这意味着它将遵循JS的原型继承（What are the nuances of scope prototypal / prototypical inheritance in AngularJS?）

既然如此，我很好奇为什么我的以下示例不会抛出错误：

<!doctype html>
<html ng-app='MyApp'>
<head>
  <meta charset='utf-8'>
  <title>Egghead</title>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js'></script>
  <script>
    var app = angular.module('MyApp', []);
    app.controller('MainCtrl', ['$scope', function ($scope) {

    }])
  </script>
</head>
<body>
  <div ng-controller='MainCtrl'>
    <input type='text' ng-model='data.message'>
    <p>{{ data.message }}</p>
  </div>
</body>
</html>

基于原型继承，这就是我期望发生的事情：

当调用MainCtrl时，它将为MainCtrl及其相应的视图创建一个$ scope对象。
每当您输入输入框时，它会将一些字符串绑定到$ scope.data.message。
但是，为了做到这一点，JavaScript的第一步是尝试解析$ scope.data。
由于MainCtrl函数没有data属性，它将尝试在rootScope中查找data属性。
由于rootScope没有数据属性，因此$ scope.data应解析为'undefined'。
最后，如果您尝试分配给undefined.message，则应该抛出错误。

然而，代码很愉快，数据绑定正确。有人可以帮忙解释为什么这不会给我带来错误吗？

Answer 1

我的原始评论是因为我不是100％，但在查看了文档之后，它是因为......

＆＃34; ngModel将尝试通过评估当前范围上的表达式绑定到给定的属性。如果该范围内的属性尚未存在，则将隐式创建该属性并将其添加到范围中。＆＃34;

因此，如果该属性不存在，则会在将值赋值给它时创建。

src：here

Answer 2

它没有失败的原因我的意思是ngModel它是因为它是一个双向数据绑定指令。您可以在另一篇文章中阅读更多相关信息：

What's the difference between ng-model and ng-bind

但解释这种行为的简单方法是，如果在ngModel中使用变量，即使它不存在，您也将其声明为范围的一部分。

为什么我的Angular ngModel示例没有抛出错误？

2 个答案: