Question

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

以下是我根据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'

Answer 1

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

触发ng-model更新

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

OR

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

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

我从default移除了updateOn事件，以表明只有此事件导致模型更新。

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

Answer 2

问题最终是我以编程方式分配价值，并且我能够通过触发“输入”来解决这个问题。＆custom;＆＃39;之前的事件：

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'

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

使用自定义事件更新角度模型

2 个答案: