1

Angular $scope に関するいくつかの 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 は、現在のスコープで式を評価することによって、指定されたプロパティにバインドしようとします。プロパティがこのスコープにまだ存在しない場合は、暗黙的に作成され、スコープに追加されます。」

したがって、そのプロパティが存在しない場合は、値を割り当てるときに作成されます。

ソース:ここ

于 2014-04-21T02:50:27.320 に答える
0

失敗しない理由ngModelは、双方向のデータ バインディング ディレクティブであるためです。これについては、別の投稿で詳しく読むことができます。

ng-model と ng-bind の違いは何ですか?

しかし、この動作を説明するより簡単な方法は、変数が内部で使用されngModelている場合、それが存在しなくてもスコープの一部として宣言していることです。

于 2014-04-21T02:50:17.570 に答える