angularjs - 你能有一个自定义触发器来更新 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} }" />

( See ng-model options)
您可以根据用户确认延迟对对象的所有提交吗？
Angular 提供的基本选项允许将输入表单的编辑与模型的实际更新分离。这样做有一些不错的好处，如果我们决定取消更新，我们可以回滚对象的值。
但是，我想延迟模型的更新，不是基于输入字段上的事件，而是基于某人单击提交按钮。
理想情况下，我想要一个用户可以更新输入的表单(假设是 .user 表单，页面中的任何绑定(bind)元素 {{user.first_name}} 等都不会更新，然后当用户单击提交时，这些更新将提交给模型。
同样，如果用户单击“取消”，则所有更新都可以回滚。
理想设置:

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


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

这可能吗？

Answer 1

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

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