Используя AngularJS, как я могу предотвратить запуск $ watch при загрузке?

Question

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

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

Когда страница перезагрузится, я хочу взять эти значения из localStorage и заполнить форму. Это работает для базовых string / integer / boolean входных значений, но не работает для более сложных объектов, например переключатели, в которых значения хранятся в этом формате:

{
"example": {
"a": {"x": true, "y": false},
"b": {"x": true, "y": true},
"c": {"x": false, "y": true}
}
}

Я пытался использовать $watchCollection, - это работает для большинства элементов управления, однако не работает для элементов управления, имеющих более одного уровня в иерархии (см. Пример).

Поскольку $watchCollection не работает с более чем одним уровнем в иерархии, я также попытался использовать $watch.

В результате все отлично сохраняется в localStorage - включая приведенный выше пример, однако, когда страница перезагружается - $watch подключается и запускается сразу.

Это приводит к перезаписи localStorage перед заполнением значений формы при загрузке!

frmCtrl.ts

this.$scope.$watch('lpForm', () => this.formAutoSaveService.saveData(this.pageId, this.$scope.lpForm), true);

frmAutoSaveService.ts

 saveData(pageId: string, storedData: any) {
       localStorage.setItem(pageId, JSON.stringify(storedData));
 }

Что мне нужно, это:

1. , чтобы получить localStorage и заполнить форму со значениями, установленными без сохранения значений по умолчанию, если только пользователь не изменил значение поля.

2. для $watch, чтобы начать «наблюдение», но не запускать метод сохранения до localStorage, пока пользователь не изменит что-либо в форме.

3. для localStorage не для переопределения с формой $scope при загрузке формы!

Может кто-нибудь помочь, пожалуйста?

Answer 1

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

После регистрации наблюдателя в области действия listener fn вызывается асинхронно (через $ evalAsync для инициализации наблюдателя. В редких случаях, это нежелательно, потому что слушатель вызывается, когда результат watchExpression не изменился. Чтобы обнаружить этот сценарий в listener fn, вы можете сравнить newVal и oldVal. Если эти два значения идентичны (===) затем слушатель был вызван из-за инициализации.

Вместо того, чтобы не дать часам срабатывать, обнаружите инициализацию и проигнорируйте ее.

this.$scope.$watch('lpForm', (newVal,oldVal) => {
    if (newVal == oldVal) return;
    //ELSE
    this.formAutoSaveService.saveData(this.pageId, this.$scope.myForm)
}, true);

Для получения дополнительной информации,см.

• AngularJS scope / rootScope Type API Reference - $ watch