2

最近、JqueryUIオートコンプリートウィジェットで使用するAngularJSディレクティブを作成しようとしました。ディレクティブは次のように使用されます。

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

オートコンプリートウィジェットとして機能し、選択したアイテムをモデル$scope.lanに保存することになっています。

最終的には成功しましたが、「input」タグをラップする「div」タグを配置する必要があることがわかりました。

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

「div」ラッピングがないと、Chromeはエラーを報告します：TypeError：undefinedのプロパティ'nodeValue'を設定できません

使用されるライブラリは次のとおりです。jquery1.8.3jqueryUI 1.9.2 anglejs 1.0.3

jsfiddlehttp : //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();
                    }
                });
            });
        }
});
4

1 に答える 1

0

.autocomplete（）は要素の親を使用しており、機能を追加するためにdivの親を探している可能性があります。

于 2012-12-16T13:13:25.180 に答える