Question

我正在尝试使用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插件，我发现返回的元素（在{{1}中） } callback function）是link指令，而不是我可以应用jQuery插件的给定模板（<auto-complete>）。

如何在模板（输入）上应用autoComplate插件？

谢谢

Answer 1

尝试添加替换：true

return {
  replace: true,
  restrict: 'E',
  [...]

带有jQuery UI的AngularJS指令 - 模板和元素

1 个答案: