Как angularjs обнаруживает $ dirty, когда тег формы не используется?

Question

Я использую $ window.addEventListener ('beforeunload' ... чтобы определить, были ли внесены изменения в страницу, и она работает в основном так, как ожидалось. Я также использую $ transitions.onStart ... для обнаружения когда используются кнопки браузера назад / вперед. Я не понимаю, как это работает, потому что в моем HTML-шаблоне нет никаких тегов формы, а только входы внутри div.

Я провел исследование по этому вопросу и, похоже, не могу найти ответ, за исключением того, что нет необходимости использовать теги формы для проверки загрязненности входных данных. Я просто не уверен, как это на самом деле работает в фоновом режиме.

<div class="modal-header bg-primary">
  <button type="button" class="close" data-dismiss="modal">&times;</button>
  <h4 class="modal-title pull-left">New Note</h4>
  <div class="clearfix"></div>
</div>
<div class="modal-body">
  <input type="textfield" ng-model="detailVM.newNoteContent">
  <button ng-click="detailVM.addNewNote()">
    Save New Note <span class="fa fa-check"></span>
  </button>
</div>

Вот мой HTML-код.

        // For page reloads and attempts to leave the site
        $window.addEventListener('beforeunload', function (e) {
            // Cancel the event
            e.preventDefault();
            // Chrome requires returnValue to be set
            e.returnValue = '';
        });

        // For when a user hits the back button 
        $transitions.onStart({}, function ($transition)
        {
            var answer = confirm("Are you sure you want to leave this page? Changes you made may not be saved.")
            if (!answer) {
                $transition.abort();
                return false;
            }
            return true;
        });

А вот что у меня в контроллере.

Когда я ввожу данные во входы и затем пытаюсь перезагрузить, закрыть или нажать кнопку «Назад», на экране появляется сообщение «Вы уверены, что хотите покинуть эту страницу?» Но как обнаружить, что входы грязные?

Answer 1

ng-model не обязательно должен быть в form, чтобы его валидаторы работали.

Из документов AngularJS:

Директива ngModel связывает input, select, textarea (или пользовательскую форму control) к свойству в области, используя NgModelController , который создан и раскрыт этой директивой.

ngModel отвечает за:

• Привязка вида к модели, какие другие директивы, такие как ввод, textarea или выберите требовать.
• Предоставление проверочного поведения (т.е. требуется, номер, адрес электронной почты, URL).
• Сохранение состояния контроля (действительный / недействительный, грязный / нетронутый, не тронутый, неточности, ошибки проверки).
• Установка связанных классов CSS для элемента (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty) включая анимацию.
• Регистрация элемента управления с его родитель форма .

- Директива API AngularJS ng-модель Справочник

Если присутствует form, ngModelController зарегистрирует свои элементы управления в форме. Это дает вам хороший контейнер для отслеживания состояния всего набора входов / элементов управления.