angularjs - Angular 指令协作

Question

因此，我在这里尝试使用 Angular 实现自动完成建议，我需要您的专业知识。

这是 html:

<div my-autosuggest>
    <input type="text" my-autosuggest-input>
    <ol>
         <li ng-repeat"item in items" my-autosuggest-list>...</li>
    </ol>
</div>

我不想使用模板生成<li>元素。 (我希望它能够灵活地以任何顺序使用任何类型的元素，并且可能在列表和下拉列表之间使用一些其他额外的元素)

困难的部分是响应输入上的箭头键以突出显示列表中的下一个/上一个元素。我如何让其他指令 my-autosuggest-list知道它应该从 my-autosuggest-input 选择下一个元素指令。

请注意，我可能在一个 Controller 中有多个自动建议，如下所示:

<div ng-controller="MyController">
   <div my-autosuggest>
       <input type="text" my-autosuggest-input>
       <ol>
            <li ng-repeat"item in items" my-autosuggest-list>...</li>
       </ol>
   </div>
   <div my-autosuggest>
       <ol>
            <li ng-repeat"item in items" my-autosuggest-list>...</li>
       </ol>
       <input type="text" my-autosuggest-input>
   </div>
</div>

到目前为止，我已尝试 $watch对于索引更改，但有时不会为列表中的某些元素调用监视(也许这是一个错误)。 $broadcast 不起作用，因为输入可能被包装在另一个 Controller 中或另一个元素内，因此列表不会听到广播。

我还尝试在根范围中为每个自动建议放置一个变量，但调用指令的顺序并不总是从父级到子级，因此我无法初始化该变量并每次创建一个新变量 my-autosuggest被调用是因为 my-autosuggest-input或者在此之前可能会调用其他人。

任何有关如何使用 Angular 进行设计的建议都将受到赞赏。

Answer 1

假设 my-autosuggest-input 和 my-autosuggest-list 始终位于 my-autosuggest 内。您可以使用一系列 $emissed 和 $broadcast 事件来完成此操作。

在 my-autosuggest-input 的链接函数中添加按下箭头键时的 $emit:

element.on('keyup', function () {
   // Figure out if this is an arrow key, if so:
   $scope.$emit('listSelect', { message: 'prevItem' }); // Or 'nextItem'
});

在my-autosuggest链接函数或 Controller 中添加:

// Add a controllerId, so that the listener doesn't handle its own events.
$scope.controllerId = Math.random().toString();
$scope.$on('listSelect', function (e, data) {
    if ($scope.controllerId !== data.controllerId) {
        $scope.$broadcast('listSelect', { 
            controllerId: $scope.controllerId,
            message: data.message 
        });
    }
});

最后，在my-autosuggest-list的链接函数或 Controller 中添加:

$scope.$on('listSelect', function (e, data) {
    if (data.message === 'nextItem') {
        // Highlight next item.
    } else {
        // Highlight previous item.
    }
});

在此场景中，my-autosuggest 将任何 listSelect 事件从其任何子级路由到其所有子级。