[解決済み] jQueryで入力値を設定した後にAngularのモデルを更新する

質問

こんな簡単なシナリオがあります。

jQueryのval()メソッドで値が変更される入力要素。

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>

以下は、私が試したフィドルです。

http://jsfiddle.net/U3pVM/743/

どなたか正しい方向を教えてください。

どのように解決するのですか？

ngModel は "input" イベントをリスンするので、あなたのコードを "fix" するには、値を設定した後にそのイベントをトリガーする必要があります。

$('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で考える」ことができますか？ ).