AngularJS-如何防止在ng-click按钮按下时意外清除输入值

Question

我有一个问题，我认为它与我的应用程序中发生的$ digest / $ apply有关，当我按输入的特定行中的“ +”按钮时，导致输入清除。

如何正确防止在按下ng-click按钮时清除输入值？

<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>

在单击按钮之前对屏幕截图进行采样（输入完全填满）

请参阅http://projectaim.ddns.net/#!/risk/edit/1

请参见http://jsfiddle.net/02Lv1s9d 一个MCVE（最小的完整可验证示例）

目标表的第一行必须完全填写，以使+按钮出现，并且必须单击+按钮才能触发问题。

Answer 1

您猜对了，这是一个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();
});

注：：您在某些地方使用本机JavaScript setTimeout， 使用$timeout来代替摘要周期。

更新：

要启用下一行，您必须像上面一样添加观察者，然后单击 事件绑定。

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

到

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