你有一个自定义触发器来更新Angular中的ng-model字段吗？

Question

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

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

(参见ng-model选项)

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

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

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

理想情况下,我喜欢用户可以更新输入的.user表单(例如,对于表单,页面中的任何绑定元素{{user.first_name}}等都不会更新,然后当用户单击提交时,这些更新会提交给模型.

同样,如果用户单击"取消",则可以回滚所有更新.

理想的设置:

<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" );
    }