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 指令中选择下一个元素。

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

<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 不起作用，因为输入可能被包装在另一个控制器或另一个元素中，因此列表不会听到广播。

我还尝试在根范围内为每个自动建议放置一个变量，但指令的调用顺序并不总是从父级到子级，因此我无法初始化该变量并在每次 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 事件从其任何子级路由到其所有子级。