钻取$scope以获取复杂的自动完成DOM中的特定元素

Drilling $scope to get a specific element in a complex auto complete DOM

本文关键字：DOM 元素 scope 获取 钻取 复杂      更新时间：2023-09-26

在尝试了一段时间后，我似乎处于死胡同，并且想到jQuery中的简单性让我再次想到了角度，但也许我认为这是一种错误的方式。

拥有此 DOM：

<div ng-controller="ChildCategoriesController">
        <div style="float:right; width:362px; height:57px; background-color:white; border:1px solid black; position:relative; right:272px;">
            <input type="text" style="width:362px; height:57px; line-height:57px; font-family:Arial; font-size:24px;" ui-keyup="{'40':'keypressCallback11($event)'}" ng-model="jobChildCategoryModel.JobCategoryName" ng-change="change()" placeholder="Place Holder Example" />
            <div id="JobscCategories" style="width:362px; background-color:white; border:1px solid black; position:relative; right:1px; display:none; font-family:Arial; font-size:24px;">
                <div click enter leave ng-class="{'MouseOver':$first}" ng-repeat="cCategory in cCategories | filter:jobChildCategoryModel | orderBy:'JobCategoryName' | limitTo:7 | unique:'JobCategoryName'" ui-keyup="{'enter':'keypressCallback1($event)'}" id="cCategoryID_{{cCategory.JobCategoryID}}">{{cCategory.JobCategoryName}}</div>
            </div>
        </div>
        <div style="float:right; position:relative; right:352px; top:22px; font-size:20px; font-weight:bold; font-family:Arial;"><a href="#">Show Jobs</a></div>
    </div>

当使用带有指令的鼠标时，我可以找到我在 DOM 中的位置，并且所有事情都在那里工作，但无法弄清楚如何使用键箭头执行此操作。我无法将 ui-keyup 绑定到div 元素（不触发事件），也无法弄清楚如何使用箭头从输入移动到自动完成div。更奇怪的是，我找不到一个完整而好的例子来做到这一点。

需要明确的是，DOM 是：

div --> 输入 --->区 类别的许多div 元素迪夫

我需要使某人在输入中输入几个字母后能够使用箭头移动到类别div 并使用 Enter 键选择其中一个或返回顶部。而且，如果有人使用鼠标移动并且位于特定元素上以便能够从该点开始使用该键......我什至似乎找不到如何从类别div块中获取特定元素，因为当我在控制器中时，我不知道元素的索引是什么。

任何人都可以回答这个问题或给我一个好的教程，每个示例都是一个非常基本的 DOM，甚至找不到这种自动完成类型的东西......很奇怪，因为有数百个jQuery教程可以做这样的事情。

谢谢

directive('autoComplete',function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(element, function () {
                    $(element).autocomplete(scope.$eval(attrs.autoComplete));
                })
            }
        };
    }).
 <input type="text" auto-complete="optionsForAutoComplete"/>

并在控制器中定义所有选项用于自动完成（这实际上是您在jquery中使用的常用自动完成选项）。例如：-

$scope.optionsForAutoComplete =   {
    minLength: 1,
    open: function () {
    },
    source: function (req, res) {
      res([{label: 'test', value: 'test', id: 101}, {label: 'test1', value: 'test1', id: 102}]);
    },
    select: function (event, ui) {
    }
};
相关文章：