1

我已经阅读了几个关于 Angular $scope 以及它如何是一个普通的旧 JavaScript 对象的 SO 响应，这意味着它将遵循 JS 的原型继承（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>

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

  1. 当 MainCtrl 被调用时，它将为 MainCtrl 及其对应的视图创建一个 $scope 对象。
  2. 每当您在输入框中键入内容时，它都会将一些字符串绑定到 $scope.data.message。
  3. 然而，为了做到这一点，JavaScript 的第一步将是尝试解析 $scope.data。
  4. 由于 MainCtrl 函数没有数据属性，它会尝试在 rootScope 中查找数据属性。
  5. 由于 rootScope 没有数据属性，$scope.data 应该解析为“未定义”。
  6. 最后，如果您尝试分配给 undefined.message，这应该会引发错误。

但是，代码可以正常工作并且数据已正确绑定。有人可以帮助解开为什么这不会给我带来错误吗？

4

2 回答 2

1

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

“ngModel 将尝试绑定到通过评估当前范围内的表达式给出的属性。如果该属性在此范围内尚不存在，它将被隐式创建并添加到范围内。”

因此，如果该属性不存在，它将创建 when 然后将值分配给它。

来源：这里

于 2014-04-21T02:50:27.320 回答
0

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

ng-model 和 ng-bind 有什么区别

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

于 2014-04-21T02:50:17.570 回答