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

在试图解决这个问题一段时间后，我似乎陷入了一个死胡同的境地，想想jQuery有多么容易让我再次思考angular，但也许我认为这是一种错误的方式

拥有此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>

{{cCategory.JobCategoryName}

我可以找到我在DOM中的位置，当我使用鼠标和指令时，所有的东西都在那里工作，但是我不知道如何使用键箭头来实现这一点。我无法将ui键绑定到div元素（不会触发事件），也无法想出如何使用箭头从输入移动到自动完成div。更奇怪的是，我找不到一个完整的好例子来做这件事

需要明确的是，DOM是：

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

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

任何人都可以回答这个问题，或者给我发一个好的教程，每个例子都是针对一个非常基本的DOM，甚至找不到一个适合这种自动完成类型的东西……奇怪的是，jQuery有数百个这样做的教程

---

谢谢

为什么不使用jquery autocomplete和angular。把autocomplete绑定到一个指令中，然后把这个指令放到你的输入中，这很容易。对不起，我不明白你说的是什么。你告诉我在angular应用程序中使用jquery auto complete？这不是与使用jquery的用户选择器和DOM操作的角度方法相反吗？是的，但最后两者都是javascript和jquery autocomplete，如果在DOM填充后绑定它，它就可以正常工作，这可以通过定向轻松实现为什么不使用jquery autocomplete和angular呢。把autocomplete绑定到一个指令中，然后把这个指令放到你的输入中，这很容易。对不起，我不明白你说的是什么。你告诉我在angular应用程序中使用jquery auto complete？这不是与使用jquery进行用户选择器和DOM操作的角度相反吗？是的，但最后两者都是javascript和jquery autocomplete，如果在DOM填充后绑定它就可以很好地工作，这很容易通过定向实现在jquery ui的示例中，它们使用的是列表，但我有一个对象，需要自动完成中的所有对象，这仍然有效吗？对象列表而不是字符串列表？对于列表中的每个元素，我需要名称、id和父id。。。而且在IE7中也需要它，是的，我们仍然为使用IE7的客户开发，我不确定这是否有效。是的，您可以使用它，并且您可以始终使用$scope来保存您的复杂对象，因为您的自动完成选项在您的控制器中。否则jQuery autocomplete也会接受对象列表。由于我找不到其他更好的答案“角度方式”，所以我会选择你的答案，这样做似乎很合乎逻辑，而不是用我自己的auto complete来自杀，谢谢你是的，我们显然会喜欢使用角度自动完成，但它仍然没有出现，所以为什么不使用我们所拥有的：）最后一件事，如果你能向我解释的话。正如我所说的，我在Categoty name（将转到标签和我猜的值）和categoryId（将转到id）中的数据，但是如果我不再有模型，我在哪里保存CategoryParentId？当有人在“自动完成”中选择了某个对象，而从您向我解释的内容中看到的模型中，我不再有模型时，我需要它们。当开始将jquery和angular结合起来时，对于像我这样的有棱角的新手来说，这会变得非常混乱。谢谢，在jquery ui的示例中，他们使用的是列表，但我有一个对象，需要自动完成中的所有对象，这仍然有效吗？对象列表而不是字符串列表？对于列表中的每个元素，我需要名称、id和父id。。。而且在IE7中也需要它，是的，我们仍然为使用IE7的客户开发，我不确定这是否有效。是的，您可以使用它，并且您可以始终使用$scope来保存您的复杂对象，因为您的自动完成选项在您的控制器中。否则jQuery autocomplete也会接受对象列表。由于我找不到其他更好的答案“角度方式”，所以我会选择你的答案，这样做似乎很合乎逻辑，而不是用我自己的auto complete来自杀，谢谢你是的，我们显然会喜欢使用角度自动完成，但它仍然没有出现，所以为什么不使用我们所拥有的：）最后一件事，如果你能向我解释的话。正如我所说的，我在Categoty name（将转到标签和我猜的值）和categoryId（将转到id）中的数据，但是如果我不再有模型，我在哪里保存CategoryParentId？当有人在“自动完成”中选择了某个对象，而从您向我解释的内容中看到的模型中，我不再有模型时，我需要它们。当开始将jquery和angular结合起来时，对于像我这样的有棱角的新手来说，这会变得非常混乱。非常感谢。

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"/>

$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) {
    }
};