jquery - 为什么在我的 AngularJS 指令中为 Jquery UI 自动完成小部件包装是否必要？

Question

最近我尝试编写一个 AngularJS 指令来与 Jquery UI 自动完成小部件一起使用。该指令以这种方式使用：

<input type="text" auto-comp ng-model="lan" />

它应该用作自动完成小部件，并将所选项目存储到模型 $scope.lan。

最后我成功了，但是发现我必须放一个“div”标签包裹“input”标签，即

<div><input type="text" auto-comp ng-model="lang" /></div>

如果没有“div”包装，Chrome 会报错：TypeError: Cannot set property 'nodeValue' of undefined

使用的库是：jquery 1.8.3 jquery UI 1.9.2 angularjs 1.0.3

我在 jsfiddle http://jsfiddle.net/QSBvh/23/中上传了代码， 你可以去掉 div，看看结果。

以下是指令：

angular.module('myApp', []).
directive('autoComp', function () {
       return function(scope, element, attrs) {
                $(element).autocomplete({
                    source: scope.availableTags,
                    select: function(event, ui) {
                        scope.lan = ui.item.value;
                        scope.$apply();
                    }
                });
        }
});

新发现。当我将 .autocomplete 放入

scope.$watch("availableTags", function(value) {});

突然，不需要“div”包装。很奇怪。

angular.module('myApp', []).
directive('autoComp', function () {
       return function(scope, element, attrs) {
            scope.$watch("availableTags", function(value) {
                $(element).autocomplete({
                    source: scope.availableTags,
                    select: function(event, ui) {
                        scope.lan = ui.item.value;
                        scope.$apply();
                    }
                });
            });
        }
});

Answer 1

.autocomplete() 正在使用元素父元素，它可能正在寻找一个 div 父元素以向其添加功能。