Question

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

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

这样的事情：

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

我想到的选项：

为项目选择器创建组件/指令，将指令放在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>
以某种方式将按钮和回调作为参数传递给项目选择器组件。这里的丑陋是按钮，样式和按钮数量的硬编码：

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

我不确定按钮配置和回调是否可以作为单个配置对象传递。我主要关注的是回调函数，如果通过配置对象而不是正确的'&'回调绑定，它们是否会正常工作。
停止尝试将选择器变为组件/指令，并使用<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可能更容易理解它将在您的组件的上下文中。

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

希望这有帮助。

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

1 个答案: