我已经阅读了几篇关于Angular $ scope的SO响应,以及它如何是一个普通的旧JavaScript对象,这意味着它将遵循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函数没有data属性,因此它将尝试在rootScope中查找data属性。
  5. 由于rootScope没有数据属性,因此$ scope.data应该解析为“未定义”。
  6. 最后,如果您尝试分配给undefined.message,这将引发错误。

但是,该代码可以愉快地工作并且数据已正确绑定。 有人可以帮忙解开为什么这不会给我带来错误吗?

===============>>#1 票数:1 已采纳

发表我的原始评论是因为我不是100%,但是在检查了文档之后,是因为...

“ ngModel将尝试通过在当前作用域上评估表达式来绑定到给定的属性。如果该属性在该作用域上尚不存在,则将隐式创建该属性并将其添加到该作用域。”

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

src: 这里

===============>>#2 票数:0

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

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

但是,解释此行为的更简单方法是,如果在ngModel使用了变量,那么即使该变量不存在,您也将其声明为作用域的一部分。

  ask by wmock translate from so

未解决问题?本站智能推荐: