AngularJS

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（最小的完整可验证示例）

目标 table 的第一行必须完全填写才能显示 + 按钮，并且必须单击 + 按钮才能触发问题。

Answer 1

您猜对了，这是一个 angularJS 摘要问题。您有一个 $element.ready 事件 webix-ui 指令最后不调用 $scope.$digest()，所以在当页面加载和元素呈现时，此事件处理程序不会被消化。

当您第一次单击加号按钮时摘要循环运行 re-rendering 你的 UI。要解决这个问题，只需在事件处理程序的末尾添加 $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();
});

N.B:有些地方你用的是原生JavaScriptsetTimeout, 使用 $timeout 来代替处理摘要周期。

更新：

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

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

到

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

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

AngularJS - How to prevent input values from undesirably clearing on ng-click button press

html

javascript

webix