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

米哈尔·J。

我有一个简单的场景：

输入元素，其值由jQuery的val（）方法更改。

我试图用jQuery设置的值更新角度模型。我试图编写一个简单的指令，但是它没有满足我的要求。

这是指令：

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

这是jQuery部分：

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

和html：

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input test-change ng-model="foo" />
        <span>{{foo}}</span>
    </div>
</div>

<button>clickme</button>

这是我尝试的小提琴：http :
//jsfiddle.net/U3pVM/743/

有人可以指出正确的方向吗？

ngModel侦听“ input”事件，因此要“修复”您的代码，需要在设置该值后触发该事件：

$('button').click(function(){
    var input = $('input');
    input.val('xxx');
    input.trigger('input'); // Use for Chrome/Firefox/Edge
    input.trigger('change'); // Use for Chrome/Firefox/Edge + IE11
});

有关此特定行为的解释，请查看我前一段时间给出的答案：“ AngularJS如何在内部捕获诸如'onclick'，'onchange'之类的事件？ ”

不幸的是，这不是您遇到的唯一问题。正如其他评论所指出的那样，以jQuery为中心的方法是完全错误的。有关更多信息，请查看这篇文章：如果我有jQuery背景，如何“思考AngularJS”？）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。