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：无法设置未定义的属性“nodeValue”

使用的库是： 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父级，以便向其添加功能。

为什么在我的AngularJS指令中为Jquery UI自动完成小部件设置<div>包装？</div>

1 个答案: