使用自定义事件更新 Angular 模型答案

【问题标题】：Update Angular model with custom event使用自定义事件更新 Angular 模型
【发布时间】：2016-06-13 15:15:36
【问题描述】：

我有一个绑定到模型值的文本输入，我希望用户输入在延迟后更新模型，但通过响应自定义事件对输入值进行编程更改以立即更新模型。

这是我根据this answer汇总的内容

HTML：

<input id="test_input" 
ng-model="test_value"
ng-model-options="{updateOn: 'default customEvent', debounce: {default: 1000, customEvent: 0}}"
bind-event
>

JS：

myApp.directive('bindEvent', function() {
  return {
    restrict: 'EAC',
    controller: function($scope, $element, $attrs) {

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

控制器：

$scope.test_value = 'abc'; // starting value

但我无法让自定义事件触发模型更新：

控制台：

angular.element('#test_input').val('xyz');
angular.element('#test_input').triggerHandler('customEvent');
-> 'custom event is triggered'
angular.element('#test_input').scope().test_value;
-> 'abc'

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

我以前用updateOn 自定义事件做过类似的事情，你应该可以使用

触发ng-model 更新

angular.element('#test_input').trigger('customEvent');

或

angular.element('#test_input').get(0).dispatchEvent(new Event('customEvent'));

这是一个显示此工作的示例：https://plnkr.co/edit/pxBFBPwbwjVJIBPhlis5?p=info。

我从updateOn 中删除了default 事件，以表明只有这个事件导致模型更新。

免责声明：这个例子只是一个概念证明，但是这种硬编码的元素选择和事件触发不属于你的视图控制器，而是可能在一个可重用的指令中。

【讨论】：

谢谢，你的例子确实有效。我的问题最终没有成为不同问题的原因（请参阅my answer）
@Yarin 哦，是的，我没注意到你是以编程方式进行的

【解决方案2】：

问题最终是我以编程方式分配值，我能够通过在“customEvent”之前触发“输入”事件来解决这个问题：

angular.element('#test_input').val('xyz');
angular.element('#test_input').trigger('input');
angular.element('#test_input').trigger('customEvent');
-> 'custom event is triggered'
angular.element('#test_input').scope().test_value;
-> 'xyz'

不知道为什么这是必要的，但它确实有效......

【讨论】：