Текстовое поле не обновляет отображаемое значение из директивы

0

Извиняюсь за длинный пост, но я пытаюсь предоставить как можно больше информации.

Я унаследовал довольно сложное приложение, которое использует Angular. Из-за NDR я не могу отправлять образцы кода и пока еще не смог воссоздать свою проблему в меньшем, менее сложном автономном режиме plnkr. Я уверен, что если бы мог, я мог бы выяснить, что мне нужно сделать, чтобы исправить эту проблему. Я знаю, что ваши руки связаны, потому что я не могу опубликовать код, и я не могу воссоздать проблему в plnkr, но Im собираюсь изо всех сил предоставить как можно больше информации, чтобы надеяться получить некоторые общие рекомендации о том, что посмотреть дальше.

Во-первых, код/​​архитектура: у меня есть form.html. Внутри этого form.html мы используем ng-repeat для итерации по списку полей, извлеченных из базы данных, и отображения каждого поля. Поля на уровне формы являются настраиваемым.

<field data="attrs.field[fieldId]" on-update"updateField" field="field"></field>

updateField (fieldId, data) определяется в form.directive.js и используется для обновления данных обратно в базу данных при ее изменении. Эта часть работает надежно.

form.html также содержит кнопку, которая используется для очистки содержимого поля.

<button class="btn btn-sm btn-danger" tooltip="Clear Field" ng-click="updateMetadataField(field._id, null)" ng-show="field.editable">

Поле использует шаблоны для генерации правильного ввода, основанного на типе. Мы используем selects, text, textedits и многие другие настраиваемые поля. Мы также используем интеллектуальный текст во многих из этих полей.

Вот один пример:

<input name={{field._id}} type="text" class="form-control" ng-model="data" ng-blur="onUpdate(field._id, data)" ng-if="field.editable" typeahead="suggestion as suggestion for suggestion in field.suggestions | filter:$viewValue | limitTo:8" />

Существует файл field.directive.js, который имеет свои собственные методы, используемые для манипулирования введенными полями ввода. Который содержит:

scope: {
  data: '=',
  field: '=',
  onUpdate: '='
},

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

Когда пользователь сначала вводит текст в поле, оставляйте поле, ng-blur вызывает updateField, и данные записываются в базу данных. Это прекрасно работает. Когда пользователь нажимает кнопку "Очистить поле" для текстового или текстового поля, значение в базе данных получает значение null, но строка, отображаемая в текстовом поле, не очищается. Однако, если мы перезагружаем форму, текстовое поле показывает пустое.

Сначала я думал, что это связано с изолированной областью внутри полей, происходящей от использования ng-repeat. Однако простой оператор вывода attrs.field в верхней части формы.html показал, что каждый раз, когда текстовое поле обновляется, также изменяется родительская область. Так что это не проблема.

Ive решил, что, возможно, проблема в том, что значение $ modelValue ввода обновляется, но $ viewValue не является (или, по крайней мере, нам нужно вызвать $ render по какой-то причине). Ive с тех пор пыталась ввести ngModel в form.directive.js, чтобы получить доступ к этим переменным и методам, чтобы увидеть, правильно ли Im, но Im имеет чертовски время.

1-я попытка: я попытался ввести ngModel в список аргументов form.directive.jss. Когда я загружаю форму, я получаю следующую ошибку:

Error: [$injector:unpr] Unknown provider: ngModelProvider <- ngModel <- fieldsDirective
http://errors.angularjs.org/1.4.7/$injector/unpr?p0=ngModelProvider%20%3C-%20ngModel%20%3C-%20fieldsDirective

Я скорее новый для Angular, и я нашел информацию по ссылке довольно запутанной. Некоторые помогают понять, что они говорят о том, что будет потрясающе!

2-ая попытка: инжектирование ngModel в качестве аргумента функции в поле ссылки в form.directive.js, а также требование: ngModel 'в разделе return {}. Когда я загружаю форму, я получаю следующую ошибку:

Error: [$compile:ctreq] Controller 'ngModel', required by directive ‘fields', can't be found!
http://errors.angularjs.org/1.4.7/$compile/ctreq?p0=ngModel&p1=fields

Когда я следую этой ссылке, он говорит, что ищет требуемый директивный контроллер для текущего элемента DOM или его предка (при использовании require: '^ ngModel). Однако они используются шаблонами в поле, используемом в форме. Означает ли это, что этот метод используется в текущем элементе DOM таким образом?

3-я попытка. Предполагая, что шаблон является причиной того, что я не могу включить ngModel, я нашел это: Обновление ng-модели в директиве, использующей шаблон. Я изменил данные: '=' сопоставление области с данными: '= ngModel. К сожалению, это совсем не изменило никакого поведения.

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

Заранее спасибо!

  • 0
    Является ли <field>data=“attrs.field[fieldId]” on-update”updateField” field=“field"</field> каким он есть на самом деле в вашем HTML? Если это так, это должно быть <field data=“attrs.field[fieldId]” on-update”updateField” field=“field"></field> .
  • 0
    Привет Харрис! Это написано так, как вы обрисовали. Я сделал ошибку при наборе. Хороший улов, хотя! Спасибо!
Теги:

2 ответа

0
Лучший ответ

Поэтому мы, наконец, решили проблему.

Кнопка Clear Field содержалась внутри Form.html, но действовала на вход внутри шаблона поля внутри поля field.html. Отлично подходит для того, чтобы не повторять код, но, к сожалению, это просто не обновляло значение внутри ввода для нас, когда мы использовали кнопку Clear Field, чтобы установить его в null.

Чтобы решить проблему, мы перемещали кнопку "Очистить поле" внутри каждого шаблона и меняли вокруг обратных вызовов, чтобы обновления, сделанные в ng-модели на входе, переходили в директиву поля, затем пузырились, чтобы сформировать директиву по мере необходимости.

Это исправляло (или, по крайней мере, работало) нашу проблему.

Благодарю!

0

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

Теперь, мой снимок в темноте: действительно ли вы обновляете переменную $scope.data вы пытаетесь работать? Мне кажется, что вы передаете обратный вызов updateField из родителя, который определен в родительском. Это будет означать, что когда вы ссылаетесь на $scope.anyVariable в функции, она ссылается на элемент родительского $scope.anyVariable $scope (вы будете работать в закрытии родительского контроллера, а не в директиве). Вы могли бы иметь updateField взять область child как параметр, передать директиву свою $scope через это, и вы знаете, что на самом деле работаете с правильным объектом $scope.

Когда эта действительная переменная, связанная с ngModel, будет правильно изменена, дисплей должен измениться по очереди.

  • 0
    Спасибо за ваш ответ! Сейчас я пытаюсь это сделать, но у меня есть вопрос: если бы я также распечатал {{data}} в шаблоне, который содержит ввод текста, не будет ли это теми же данными области, что и в текстовом поле? Если так, то я проверил, что переменная области видимости шаблона обновляется с помощью этого метода.
  • 0
    Да, я бы сказал, что это тот же масштаб. Простой тест - сделать console.log($scope) внутри вызываемой функции. Это даст вам точный ответ о том, где вы работаете, и мы увидим, верна ли эта линия расследования. Возможно, вы заметите что-то сами.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню