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>元素。(我希望它是灵活的，可以使用任何顺序的任何类型的元素，也许在列表和下拉列表之间使用一些其他额外的元素)

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

请注意，我可能在一个控制器中有多个自动建议，如下所示：

<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来更改索引，但有时不会为列表中的某些元素调用监视(可能是个bug)。$broadcast无法工作，因为输入可能被包装在另一个控制器或另一个元素中，因此列表不会听到广播。

我还尝试将每个自动建议的变量放在根作用域中，但指令的调用顺序并不总是从父到子，所以我不能初始化该变量并在每次调用my-autosuggest时创建一个新变量，因为在此之前可能会调用my-autosuggest-input或其他变量。

任何关于如何使用angular来设计它的建议都是值得感谢的。

Answer 1

假设my-autosuggest-input和my-autosuggest-list总是在my-autosuggest中。您可以使用一系列$emitted和$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链接函数或控制器中添加：

// 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的链接函数或控制器中添加：

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

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