使用jQuery设置输入值后，更新Angular模型。

16 浏览
0 Comments

使用jQuery设置输入值后，更新Angular模型。

我有一个简单的场景：\n通过jQuery的val()方法改变值的输入元素。\n我试图用jQuery设置的值更新angular模型。我尝试编写一个简单的指令，但它没有达到我想要的效果。\n这是指令：\n

var myApp = angular.module('myApp', []);
myApp.directive('testChange', function() {
    return function(scope, element, attrs) {        
        element.bind('change', function() {
            console.log('value changed');
        })
    }
})

\n这是jQuery部分：\n

$(function(){
    $('button').click(function(){
        $('input').val('xxx');
    })
})

\n和html：\n

        
        {{foo}}

\n这是我尝试的fiddle：
\nhttp://jsfiddle.net/U3pVM/743/\n有人可以指点我正确的方向吗？

0

3 答案

0 Comments

原因：使用jQuery设置输入值后，Angular模型没有更新。

解决方法：使用原生JavaScript创建并触发一个事件来更新Angular模型。

以下是解决方法的代码示例：

$("input")[0].dispatchEvent(new Event("input", { bubbles: true }));

这个方法适用于Angular 1.1.5、jQuery 2.2.4和Jasmine 2.5.3，并且在其他触发机制无效的情况下非常奇怪地有效。

使用这个方法可以在脚本中设置输入时触发表单验证，即使在Angular 5中也可以使用。在webview.evaluatejavascript中尤其有用。

0
0 Comments

问题的原因是在Angular模型中设置了输入值后，无法通过jQuery的trigger方法触发input事件。解决方法是改用angular.element的triggerHandler方法来触发input事件。以下是原文的整理：

在Angular应用中，我无法通过jQuery的jQuery('#myInputElement').trigger('input')方法来触发input事件。但是，我可以通过angular.element(jQuery('#myInputElement')).triggerHandler('input')方法来触发。这个解决方法对我也有效。

$在这里表示jQuery。问题中已经标记了。

这个方法对我也有效，而$('myInputElement').trigger('input')方法有时候有效，有时候无效。我无法找到规律。但是，这个解决方法每次都有效。

我的代码中使用了#前缀：angular.element($('#myInputElement')).triggerHandler('input')

这个triggerHandler方法对我也有效，我在处理textarea而不是input。谢谢。

这个方法是在一堆已经被接受的解决方法中唯一有效的。谢谢。

我的模型已经改变了，但是我可以通过ng-change来捕捉事件。问题出在哪里？下面是我的代码：

<input class="textColor" id="color_{{itemId}}" type="text" name='color_{{itemId}}' ng-model="color" ng-change="optToPreviewText()"/>

这个方法对我在让bootstrap-datepicker与Angular一起工作时非常有帮助。我在这里有详细描述：stackoverflow.com/a/41815629/1813219

这个方法对我也有效：angular.element($('#server_name_dld')).triggerHandler('input')

我不得不将事件名称从'input'改为'change'：angular.element(jQuery('#myElementId')).triggerHandler('change')

0
0 Comments

问题的原因是ngModel监听"input"事件，所以在设置完值之后需要触发该事件来更新Angular模型。解决方法是在设置完值之后触发"input"事件和"change"事件。

但是，不幸的是，这不是你唯一的问题。正如其他评论中指出的那样，你的jQuery-centric方法是错误的。关于更多信息，请参考这篇文章：如何在具有jQuery背景的情况下“思考AngularJS”？

很酷！只有一个例外：为什么它在隐藏的输入上不起作用？当我将输入类型切换为文本时，它按预期工作。

这解决了在使用jQuery日历插件时的一个重大问题。通过在input.val()之后使用trigger('input')来修改插件，可以在用户选择日历日期后触发ng-change事件。谢谢！

在隐藏的输入上工作得很好：element.triggerHandler("change");

对我来说不起作用。$("#Distance").val(data); $("#Distance").trigger('input');

在Angular 1.4.3中，input事件在包括IE11在内的IE浏览器上不起作用。只有当$sniff.hasEvent('input')为true时，input事件才会起作用，但是即使在IE11上$sniff.hasEvent('input')也为false！因此，我们可以使用change事件代替input事件。

0