将多个“按钮”参数传递给 Angular 组件

Question

我正在使用 Angular 1.5 创建一个可重用的项目选择器组件。选择器有一个搜索字段和一个可供选择的项目列表。选择器的一个示例用例是一个弹出窗口，用户选择一些项目，然后有一个“继续”按钮继续。

从概念上讲，搜索字段和项目列表属于组件，“继续”按钮属于周围的对话框。但是，我想将按钮放置在搜索字段旁边。在某些情况下，没有额外的按钮，有时是一个额外的按钮，有时是两个。

类似这样的：

创建这样一个组件的最佳方法是什么？

我想到的选项：

1. 为项目选择器创建一个组件/指令，在 HTML 中将按钮放在指令之前或之后，并使用 CSS 来定位按钮。

   这里按钮的位置丑陋而脆弱，因为它不在 HTML 中的正确位置。它可能需要一个包装器 div 和选择器组件顶部的绝对定位：

   <div style="position: relative"> <item-picker></item-picker> <button name="Continue" ng-click="submit()" style="position:absolute; top:5px; right: 5px"></button> </div>

2. 以某种方式将按钮和回调作为参数传递给项目选择器组件。这里的丑陋在于按钮和样式的硬编码以及按钮的数量：

   <item-picker btn1-text="Continue" btn1-style="primary" btn1-callback="submit()" btn2-text="Cancel" btn2-style="secondary" btn2-callback="cancel()"></item-picker>

   我不确定按钮配置和回调是否可以作为单个配置对象传递。我主要关心回调函数，如果通过配置对象而不是正确的'&'回调绑定，它们是否会正常工作。

3. 停止尝试将选择器变成组件/指令，只需使用<ng-include> 包含从范围读取按钮配置的选择器代码。丑陋在于缺乏范围和不使用组件。

对于这种情况有一些最佳实践吗？

Answer 1

一种可能的解决方案是使用 ng-transclude，因此您的代码可能类似于：

标记

<item-picker>
  <button ng-click="parentScopeFn()">Btn 1</button>
  ...
</item-picker>

指令

angular.module('myApp', [])
.directive('itemPicker', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      ...
    },
    templateUrl: 'item-picker.html'
  };
});

itemPicker 模板标记

<div class="item-picker">
  <div class="item-picker-controls">
    <div class="item-picker-search"><input type="search" ng-model="..."></div>
    <div class="btn-group" ng-transclude></div>
  </div>
  <ul class="item-picker-list">
    <li ng-repeat="item in items" ng-bind="item"></li>
  </ul>
</div><!-- end item-picker template -->

当然，上面的代码只是一个例子，它对你的 itemPicker 组件做了很多假设。此外，您仍然需要使用 CSS 来定位您的按钮，但使用 b/c 可能更容易推理它会在您的组件的上下文中。

注意 您还可以使用“多槽嵌入”。如果您将拥有的按钮的数量和类型是可预测的，并且您希望它们以一致的方式排列，无论它们如何放置在标记中，这可能很有用。

希望这会有所帮助。