0

jQuery UI autoCompleteプラグインを使用して、オートコンプリートテキスト入力のAngularJSディレクティブを作成しようとしています。

これは私の角度コードです：

<script type="text/javascript">
        angular.module('components', []).
            directive('autoComplete', function () {
                return {
                    restrict: 'E',
                    template: '<input type="text" id="tags" name="tags" maxlength="80" />',
                    link: function (scope, element, attrs) {
                        var dataUrl = '@Url.Action("GetTags", "Home")';
                        element.autocomplete({
                            source: function (term, responseCallBack) {
                                $.get(dataUrl + '?term=' + term.term, function (data) {
                                    responseCallBack(data);
                                });
                            },
                            minLength: 2,
                            select: function (event, ui) {
                                alert(ui.item.label);
                            }
                        });
                    }
                };
            });

        angular.module('JqueryApp', ['components']);
    </script>

これは私のhtmlコードです：

<div ng-app="JqueryApp">
    <div>
        <div>
            <auto-complete />
        </div>
    </div>
</div>

<auto-complete>autoCompleteプラグインを適用できるように、ディレクティブタグ要素ではなくテンプレート要素で作業する必要があるため、機能していません。返された要素（linkコールバック関数内）が<auto-complete>ディレクティブであり、指定されたテンプレートではないことがわかりました（<input>）jQueryプラグインを適用できます。

テンプレート（入力）にautoComplateプラグインを適用するにはどうすればよいですか？

ありがとうございました

4

1 に答える 1

0

置換を追加してみてください：true

return {
  replace: true,
  restrict: 'E',
  [...]
于 2012-12-17T22:42:36.850 に答える