带有 jQ​​uery UI 的 AngularJS 指令 - 模板和元素

Question

我正在尝试使用 jQuery UI 自动完成插件创建自动完成文本输入的 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 插件？

谢谢

Answer 1

尝试添加 replace: true

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