Почему мой метод Angular ngModel не выдает ошибку?

Я прочитал несколько ответов SO относительно области Angular $ и как это обычный старый объект 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 вызывается, он создаст объект $ scope для MainCtrl и его соответствующего представления.
  2. Всякий раз, когда вы вводите в поле ввода, он привязывает некоторую строку к $ scope.data.message.
  3. Однако для этого первым шагом в JavaScript будет попытка разрешить $ scope.data.
  4. Поскольку функция MainCtrl не имеет свойства данных, она попытается найти свойство данных в корневом каталоге.
  5. Так как rootScope не обладает свойством data, $ scope.data должен быть разрешен к 'undefined'.
  6. Наконец, если вы попытаетесь присвоить undefined.message, это должно вызвать ошибку.

Однако код успешно работает, и данные связаны правильно. Может кто-то помочь распутать, почему это не бросает мне ошибку?

1
21 апр. '14 в 5:45
источник поделиться
2 ответов

Сделал мой оригинальный комментарий, потому что я не был на 100%, но после проверки документов это потому, что...

"ngModel попытается привязать свойство, заданное путем оценки выражения в текущей области. Если свойство еще не существует в этой области, оно будет создано неявно и добавлено в область видимости".

Поэтому, если это свойство не существует, оно будет создаваться, когда затем назначить ему значение.

src: здесь

1
21 апр. '14 в 5:50
источник

Причина, почему это не подводит, и я имею в виду ngModel это потому, что это двухсторонняя директива привязки данных. Вы можете узнать больше об этом в этом другом сообщении:

В чем разница между ng-model и ng-bind

Но более простой способ объяснить это поведение состоит в том, что если переменная используется в ngModel вы также объявляете ее частью области действия, даже если она не существует.

0
21 апр. '14 в 5:50
источник

Посмотрите другие вопросы по меткам или Задайте вопрос