AngularJs scope.apply 似乎打破了自动完成 jquery ui

Question

我在尝试使用 Jquery-UI.

将自动完成字段实现到指令中时遇到了一些问题

让我解释一下。这是我的 html 元素：

<div class="form-group" >
  <input type="text" placeholder="Find a category" data-category-autocomplete data-append-to=".autocomplete-container" data-ng-model="categories" class="form-control login-field" name="category_find"></input>
  <div class="autocomplete-container"></div>
</div>

现在，这里是 angular js 指令：

app.directive('categoryAutocomplete', function(HomeService) {
        return {
            restrict: 'A',
            link: function(scope, elem, attrs) {
                elem.autocomplete({
                    source: function(request, response) {
                        HomeService.search_category(this.term).then(function(success) {
                            response(success);
                        }, function(error) {
                            response("");
                        });

                    }, select: function(event, ui) {
                         scope.choose_category(ui.item.id, ui.item.label, true);
                         scope.$apply();
                    }
                    , appendTo : attrs.appendTo
                }).data("ui-autocomplete")._renderItem = function(ul, item) {
                    item.label = item.title;
                    item.id = item.id_category;
                    var categoryLine = $("<a>").html(item.title);

                    return $('<li>').append($("<a>").append(categoryLine).html()).appendTo(ul);
                };
            }
        }
    });

最后，选择类别功能：

$scope.choose_category = function(id_category, label) {
    $scope.category = label;
    $scope.id_category = id_category;
};

因此，它在第一次使用时运行良好。让我解释一下每个步骤：

在我的字段中输入一些带有结果的字符
Select 一个结果
我的 selection 正常，自动完成字段正在重置这很有效
现在我想再搜索一次，所以我输入了一些新内容
结果出现了，但是我不能再点击它了，就像我不想进入我的自动完成指令的 "select"，但是 "source" 效果很好

如您所见，好像我只能 select 一次我的自动完成结果，但是 scope.apply();似乎 "break" 第二次搜索的 selection 可能性。

有人看到我的问题吗？

感谢您提供的任何帮助！

Answer 1

好的，所以我解决了我的问题。这是出了什么问题。

我的自动完成字段隐藏在自定义 select 列表中。

我还创建了一个自定义指令，当您在它的外部单击时关闭我的自定义 select，这里是：

app.directive('clickAnywhereButHere', function ($document) {
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
          elem.bind('click', function(e) {
            e.stopPropagation();
          });
          $document.bind('click', function() {
            // magic here.
            scope.$apply(attr.clickAnywhereButHere);
          })
        }
      };
});

问题是：e.stopPropagation();第一次单击以选择结果时效果很好，但第二次时，我的事件已停止，因此它不会继续工作。

我移动了 clickAnywhereButHere() 调用的调用，现在它运行良好。

为了更好地理解它，这里有一个代码示例： http://jsfiddle.net/acha1cL1/1/ 这是我使用的损坏代码示例（请参阅 html 代码的不同之处）：http://jsfiddle.net/2yL62fyq/2/

再次感谢您的帮助！

AngularJs scope.apply 似乎打破了自动完成 jquery ui

AngularJs scope.apply seems to break autcomplete jquery ui

jquery

angularjs

jquery-ui

autocomplete

angularjs-directive