将多个 'button' 参数传递给 Angular 组件

Passing multiple 'button' parameters to Angular component

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

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

像这样:

创建此类组件的最佳方法是什么?

我想到的选项:

  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> 来包含从范围读取按钮配置的选择器代码。丑陋是缺乏范围界定和不使用组件。

是否有针对此类情况的最佳实践?

一种可能的解决方案是使用 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 可能更容易推理它会在您的组件的上下文中。

备注 您也可以使用 "multi slot transclusion"。如果您拥有的按钮的数量和类型是可预测的,并且您希望它们以一致的方式排列,无论它们如何放置在标记中,这可能很有用。

希望对您有所帮助。