20

ページで AjgularJS を使用していて、jqueryui からオートコンプリートを使用するフィールドを追加したいのですが、オートコンプリートが ajax 呼び出しを起動しません。

angular（ng-appおよびng-controller）のないページでスクリプトをテストしましたが、うまく機能しますが、angularjsを使用してページにスクリプトを配置すると、機能しなくなります。

何か案が？

jquery スクリプト:

$(function () {

    $('#txtProduct').autocomplete({
        source: function (request, response) {

            alert(request.term);

        },
        minLength: 3,
        select: function (event, ui) {

        }
    });

});
  • 興味深いメモ: Chrome インスペクターでスクリプトを呼び出すと、オートコンプリートが機能し始めます!!!
  • バージョン: AngularJS: 1.0.2 - JqueryUI: 1.9.0

結論: jQueryUI のオートコンプリート ウィジェットは、例として AngularJS のカスタム ディレクティブ内から初期化する必要があります。

マークアップ

<div ng-app="TestApp">
    <h2>index</h2>
    <div ng-controller="TestCtrl">

        <input type="text" auto-complete>ddd</input>

    </div>
</div>

Angular スクリプト

<script type="text/javascript">

    var app = angular.module('TestApp', []);

    function TestCtrl($scope) { }

    app.directive('autoComplete', function () {
        return function postLink(scope, iElement, iAttrs) {

            $(function () {
                $(iElement).autocomplete({
                    source: function (req, resp) {
                        alert(req.term);
                    }
                });
            });

        }
    });

</script>
4

3 に答える 3

38

おそらく、「角度のある方法」でそれを行う必要があります...つまり、ディレクティブを使用してDOM要素を設定し、イベントバインディングを実行し、サービスを使用してデータを取得し、コントローラーを使用してビジネスを実行しますロジック...Angularである依存性注入の良さを活用しながら...

オートコンプリートデータを取得するサービス...

app.factory('autoCompleteDataService', [function() {
    return {
        getSource: function() {
            //this is where you'd set up your source... could be an external source, I suppose. 'something.php'
            return ['apples', 'oranges', 'bananas'];
        }
    }
}]);

オートコンプリートプラグインを設定する作業を行うためのディレクティブ。

app.directive('autoComplete', function(autoCompleteDataService) {
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
                    // elem is a jquery lite object if jquery is not present,
                    // but with jquery and jquery ui, it will be a full jquery object.
            elem.autocomplete({
                source: autoCompleteDataService.getSource(), //from your service
                minLength: 2
            });
        }
    };
});

そしてそれをマークアップで使用しています...ng-modelが、選択したもので$scopeに値を設定していることに注目してください。

<div ng-controller="Ctrl1">
    <input type="text" ng-model="foo" auto-complete/>
    Foo = {{foo}}
</div>

これは基本的なことですが、うまくいけばそれが役立つでしょう。

于 2012-10-22T21:29:36.263 に答える