Question

Angular有许多选项可以根据输入字段中的事件延迟对模型的更新：

<input type="text" name="username"
   ng-model="user.name"
   ng-model-options="{updateOn: 'default blur', 
                      debounce: {default: 500, blur: 0} }" />

（See ng-model options）

您可以根据用户确认延迟对对象的所有提交吗？

Angular提供的基本选项允许将输入表单的编辑与模型的实际更新分离。这有一些很好的奖励，因为如果我们决定取消该更新，我们可以回滚对象的值。

但是，我想延迟模型的更新，而不是基于输入字段上的事件，而是基于某人单击提交按钮。

理想情况下，我想要一个用户可以更新输入的表单（让我们说.user表单，页面{{user.first_name}}等中的任何绑定元素都不会更新，然后当用户单击“提交”时，这些更新将提交给模型。

同样，如果用户点击＆＃34;取消＆＃34;更新都可以回滚。

理想的设置：

<input type="text" name="username"
   ng-model="user.name"
   ng-model-options="{updateOn: 'myCustomEvent' }" />


<button onClick="broadCastMyCustomEventIntoForm()">Save changes</>

这可能吗？

Answer 1

是的，只要您将输入字段绑定到自定义事件，然后在用户确认时触发该自定义事件，就可以。

http://plnkr.co/edit/GgsaFbIurhx88p6HJgkT?p=preview

<input bind-event type="text" name="userName" ng-model="user.name" ng-model-options="{ updateOn: 'customEvent'}" />

  //bind-event directive for input fields. 
  .directive('bindEvent', function() {
      return {
        restrict: 'EAC',
        controller: function($scope, $element, $attrs) {

          $element.on('customEvent', function() {
            console.log('custom event is triggered');
          });
        }
      };
    });

    //trigger the event on submit.
    $scope.click = function() {
      $element.find( "input" ).triggerHandler( "customEvent" );
    }

Answer 2

我今天发现了一种使用$ emit执行此操作的简单方法。我试图在按钮点击时应用过滤器，而不是立即（默认行为）：

<input ng-model="myFilter.minPrice" ng-model-options="{updateOn: 'filterBtnClicked'}">

...

<button type="button" ng-click="$emit('filterBtnClicked')">Filter</button>

仅在单击按钮后才应用模型值。

Answer 3

我不认为角度本身支持您描述的用例。

但是完成它并不困难，将真实模型的副本暴露给视图并将更改复制到click事件处理程序上的真实模型。

您是否可以使用自定义触发器来更新Angular中的ng-model字段？

您可以根据用户确认延迟对对象的所有提交吗？

理想的设置：

3 个答案: