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

我已经阅读了一些关于Angular$scope的SO响应，以及它是一个普通的旧JavaScript对象，这意味着它将遵循JS的原型继承（AngularJS中scope原型/原型继承的细微差别是什么？）

既然是这样，我很好奇为什么下面的例子没有抛出错误：

<!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函数没有数据属性，它将尝试在rootScope中查找数据属性
由于rootScope没有数据属性，$scope.data应解析为"undefined"
最后，如果您尝试分配给undefined.message，这将引发一个错误

然而，代码运行良好，数据绑定正确。有人能帮我解开为什么这不会给我带来错误吗？

发表我最初的评论是因为我不是100%，但在检查了文档后，这是因为。。。

ngModel将尝试绑定到通过计算当前作用域上的表达式而给定的属性。如果此作用域上不存在该属性，则会隐式创建该属性并将其添加到作用域中。

因此，如果该属性不存在，它将在为其赋值时创建。

src:here

它之所以没有失败，我指的是ngModel，是因为它是一个双向数据绑定指令。你可以在其他帖子上阅读更多关于这一点的信息：

什么'；s ng模型和ng绑定之间的区别

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

相关内容

最新更新

热门标签：