angularjs ng-model не обновляется

Question

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

Теперь, когда я нажимаю на значок, он не обновляет ng-модель. Сначала я должен ввести другой символ или пробел для AngularJS, чтобы идентифицировать изменения, внесенные во вход.

https://i.gyazo.com/21d80e370726166a200f1165e169a0cf.gif, настоящим примером того, что происходит.

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

код у меня есть:

editCellTemplate: function (container, options) { 
    container.html('<input class="icon-picker-input edit icp icp-auto" type="text" ng-model="iconInput" /><script>$(".icp-auto").iconpicker();</script>'); 
    options.setValue($scope.iconInput); 
    $compile(container)($scope); 
} 

Я использую GridView из DevExtreme с обычаем editCellTemplate.

Связывание:

который объявлен здесь:

Кто-нибудь есть подсказки о том, как это исправить? Заранее спасибо!

Answer 1

Основная причина, по которой ваш код не работает должным образом, заключается в том, что Angular отслеживает только события взаимодействия с пользователем, чтобы обновить модель. Ваш значок уже полностью обходит Angular, напрямую устанавливая значение на входе.

Для обновления модели необходимо установить hook на процессе обновления выбора иконки: всякий раз, когда вы выбираете иконку, либо перезаписать переменную iconInput области действий самостоятельно (и обернуть это в $scope.$apply вызова) или гораздо проще, активируйте событие 'input' на входном элементе, что заставит Angular забрать новое значение (см. here).

Я предлагаю вам сделать что-то вроде этого:

editCellTemplate: function (container, options) { 
    container.html('<input class="icon-picker-input edit icp icp-auto" type="text" ng-model="iconInput" />'); 
    options.setValue($scope.iconInput);   
    $compile(container)($scope); 

    // Avoid inline script tags, you can make the iconpicker here 
    $(".icp-auto").iconpicker(); 

    // Watch for icon picker selections 
    $(".icp-auto").on('iconpickerSelected', function(e) { 
     // Fire the "input changed" event 
     $(e.currentTarget).trigger('input'); 
    }); 
} 

Обратите внимание, что я удалил тег сценария внутри скомпилированного HTML, потому что вы можете прекрасно инстанцируете сборщик иконки в основном коде. Теги скрипта оцениваются в глобальном контексте, который часто не является тем, что вы хотите.

Update: Ошибка во время компиляции вы сообщили в своем комментарии связано с тем, что ваша установка Машинопись имеет определение класса JQuery (вероятно, jquery.d.ts файл), который не включает в себя iconPicker() метод. Во время выполнения содержимое тега <script>, скомпилированного в Angular, напрямую интерпретируется как простой Javascript, избегая проверки типов Typcript.

См. this answer для простого способа включения дополнительных методов в интерфейс JQuery. Я настоятельно рекомендую вам прекратить ставить логику в скомпилированные элементы <script>, есть большая вероятность, что она вернется, чтобы укусить вас.

Answer 2

Ваша проблема в том, что iconpicker() обновляет input без Углового уведомления. Способ исправить это, это позвонить $scope.$apply() непосредственно после. Проблема здесь в том, что вы включили свой скрипт. Этот синтаксис jQuery вызовет iconpicker() только для первого элемента, так что я не думаю, что он будет работать вообще, если вы отредактируете вторую строку в своей демонстрации.

Вместо генерацию числового идентификатора и изменений к этому:

editCellTemplate: function (container, options) { 
    container.html('<input class="icon-picker-input edit icp icp-auto"' + 
     ' type="text" ng-model="iconInput" id="uniqueID"/>' + 
     '<script>$("#uniqueID").iconpicker();$scope.$apply();</script>'); 
    options.setValue($scope.iconInput); 
    $compile(container)($scope); 
} 

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