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

发布于06月14日

I have this simple scenario:

值由jQuery的val()方法更改的输入元素.

我正在try 使用jQuery设置的值更新Angular 模型.我试着写一条简单的指令，但它不是我想要的.

以下是指令:

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>

Here is the fiddle with my try:
http://jsfiddle.net/U3pVM/743/

有人能给我指个方向吗？

推荐答案

ngModel监听"输入"事件，所以要"修复"代码，需要在设置值后触发该事件:

$('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
});

对于这种特殊行为的解释，请查看我刚才给出的答案:"How does AngularJS internally catch events like 'onclick', 'onchange'?"

但不幸的是，这不是你唯一的问题.正如其他帖子 comments 所指出的，以jQuery为中心的方法是完全错误的.欲了解更多信息，请查看此帖子:How do I “think in AngularJS” if I have a jQuery background?).