更新自定義事件的角度模型

-1

我有一個文本輸入綁定到模型值，我希望用戶輸入來延遲後更新模型，但編程更改輸入值以立即更新模型，通過響應自定義事件。更新自定義事件的角度模型

這是我放在一起基於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'

來源

2016-06-13 Yarin

我與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事件，以顯示只有此事件正在導致模型更新。

聲明：這個例子僅僅是一個概念證明，但是這種類型的硬編碼元素選擇和事件觸發不屬於你的視圖控制器，而可能是一個可重用的指令。

來源

2016-06-13 22:38:48 CShark

謝謝，你的例子確實有效。我的理由並沒有最終成爲一個不同的問題（請參閱[我的答案]（http://stackoverflow.com/a/37801626/165673）） – Yarin

@Yarin噢，我沒有注意到你正在做它編程 – CShark

的問題結束了，我是編程方式分配的價值，我可以通過「自定義事件」之前觸發「輸入」事件來補救：

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'

不知道爲什麼，這是必要的，但它的工作原理...

來源

2016-06-14 01:34:48 Yarin

更新自定義事件的角度模型

回答

相關問題