Question

我目前正在修改一个网站，该网站分为iframes，现在已经嵌入（使用AngularJS），没有任何iframe。

这有一个很大的问题：我有一个用于选择位置的Kendo UI自动完成下拉元素。 iframe和embedded的行为与自动完成下拉菜单周围/下方的滚动完全不同。

旧应用：滚动的网站（iframe）和下拉菜单仍然可见，并与网站的其余部分一起移动，直到您选择了一个项目。新应用程序：下拉框立即关闭，您必须重新键入一些输入才能再次打开它。不可接受的可用性！

如何在嵌入模式下获得OLD滚动行为时，如何获得自动完成下拉菜单（如果不可能，则不必为Kendo）？

Answer 1

好吧，我发现解决方法对我来说很好用：

在指令html中，我为事件k-close添加了回调。在控制器的这个回调中，我使用控制器中的以下代码阻止了关闭事件的默认行为（当然在特定条件下）：

$scope.closeCallback= function (e) {
     if (someConditionForWhichDropdownShouldntBeClosed) {
          e.preventDefault();
     }
};

这是指令的HTML：

<input
    ng-model="model"        
    kendo-auto-complete="source"
    k-data-source="locationDataSource"
    k-select="selectLocation"
    k-close="closeCallback">

就我而言，只要没有选择任何项目，我就会阻止Dropdown关闭。

为此，我添加了一个新的布尔范围变量，默认情况下为false，如果打开下拉列表，则设置为true：

$scope.locationDataSource = new kendo.data.DataSource({
    type: "json",
    serverFiltering: true,
    transport: {
        read: function (options) {
             $scope.keepKendoDropdownOpen = true;
             someOtherFuncionalityAfterSelectingAnItem();
        }
     }
});

并在选择后再次设置为false（在指令的k-select的回调中）。

如果用户按下ESC或其他东西，也会很好看，但到现在为止还可以。

请随意改进我的解决方案或发布其他解决方案！： - ）

使用kendo-ui滚动问题在嵌入模式下自动完成（无iframe）

1 个答案: