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

【问题标题】：AngularJs scope.apply seems to break autcomplete jquery uiAngularJs scope.apply 似乎打破了自动完成 jquery ui
【发布时间】：2015-01-10 15:41:57
【问题描述】：

我在尝试使用 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;
};

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

在我的字段中输入一些带有结果的字符
选择一个结果
我的选择没问题，自动完成字段正在重置这很好用
现在我想进行另一个搜索，所以我输入 someting new
结果显示出来了，但我不能再点击它了，就像我不想进入自动完成指令的“选择”，但“源”运行良好

如您所见，就像我只能选择一次我的自动完成结果，但是 scope.apply();似乎在第二次搜索时“破坏”了选择可能性。

有人看到我的问题吗？

感谢您提供的任何帮助！

【问题讨论】：

不能将 <a> 附加到另一个 <a> ，这是无效的 html。创建一个复制您的问题的演示
@Mayous 在控制台中是否有任何错误？
在应用范围之前，您应该始终检查阶段。该语句应该是 if(!scope.$$phase) scope.$apply()
大家好，感谢您的帮助。我遵循@charlietfl 的建议并在 jsfiddle 上创建了一个示例，并且代码运行良好。为了使我的帖子更具相关性，我删除了一些其他无用的代码，但我认为其中一些代码现在是问题所在。我会回来提供有关使我的自动完成字段停止工作的代码和平的更多信息！

标签： jquery angularjs jquery-ui autocomplete angularjs-directive

【解决方案1】：

好的，所以我解决了我的问题。这就是问题所在。

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

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

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/

再次感谢您的帮助！

【讨论】：