AngularJS - Как предотвратить нежелательную очистку входных значений при нажатии кнопки ng - PullRequest
Новая
       44

AngularJS - Как предотвратить нежелательную очистку входных значений при нажатии кнопки ng

0 голосов
/ 23 июня 2019

У меня есть проблема, которая, по моему мнению, связана с применением $ digest / $, происходящим в моем приложении, из-за которого вводимые данные очищаются при нажатии кнопки «+» в определенной строке моих входов.

Как правильно предотвратить очистку входных значений при нажатии кнопки ng? 

<tr ng-repeat="event in [0,1,2,3,4,5]">
    <td>
        <div class="evt{{event}}" enabled="{{ctrl.enabledItem[event]}}"
             ng-show="ctrl.config.cost{{event}}.done" config="cost{{event}}"
             webix-ui="cost{{event}}" width="30" height="30"
             type="text" id="cost{{event}}" name="cost[{{event}}]">
        </div>
    </td>
    <td>
        <input type="button" id="evt{{event}}" ng-if="event != 5" 
               style="display:none" ng-click="ctrl.enable(event)"
               value="+">
    </td>
</tr>

Пример снимка экрана до нажатия кнопки (с полностью заполненными входами)

enter image description here

См. http://projectaim.ddns.net/#!/risk/edit/1

См. http://jsfiddle.net/02Lv1s9d для MCVE (минимальный полный проверяемый пример)

Первый ряд целевой таблицы должен быть полностью заполнен, чтобы появилась кнопка «+» и была нажата кнопка «+», чтобы вызвать проблему.

1 Ответ

1 голос
/ 03 июля 2019

Вы правильно догадались, это проблема дайджеста angularJS.У вас есть событие $element.ready в директиве webix-ui, которое не вызывает $scope.$digest() в конце, поэтому изменения в этом обработчике событий не перевариваются при загрузке страницы и отрисовке элементов.

Цикл дайджестазапускается при первом нажатии кнопки «плюс» при повторном рендеринге пользовательского интерфейса.Чтобы решить эту проблему, просто добавьте $scope.$digest() в конце обработчика событий. 

$element.ready(function() {
    // Here goes all existing code
    // Add the following block to enable the row
    let rowIndex = dataname[dataname.length - 1];
    $scope.$watch(() => $scope.$parent.enabledItem[rowIndex], isEnabled => {
        $scope.config[dataname].disabled = !isEnabled;
        watcher();
    });
    // call digest at the end
    $scope.$digest();
});

NB: В некоторых местах вы используете собственный JavaScript setTimeout, используйте $timeoutвместо этого, который заботится о циклах дайджеста.

Обновление:

Чтобы включить следующую строку, вы должны добавить наблюдатель, как я делал выше, и изменить привязку события клика. 

<input type="button" ng-click="enable(event)">

до 

<input type="button" ng-click="enable(event + 1)">
...