将多个 'button' 参数传递给 Angular 组件
Passing multiple 'button' parameters to Angular component
我正在使用 Angular 1.5 创建一个可重复使用的项目选择器组件。选择器有一个搜索字段和一个可供选择的项目列表。选择器的一个示例用例是一个弹出窗口,用户在其中选择一些项目,然后有一个 "Continue" 按钮继续。
从概念上讲,搜索字段和项目列表属于组件,"Continue" 按钮属于周围的对话框。但是,我想将按钮放置在搜索字段旁边。在某些情况下没有额外的按钮,有时是一个额外的按钮,有时是两个。
像这样:
创建此类组件的最佳方法是什么?
我想到的选项:
为项目选择器创建一个组件/指令,将按钮放在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>
来包含从范围读取按钮配置的选择器代码。丑陋是缺乏范围界定和不使用组件。
是否有针对此类情况的最佳实践?
一种可能的解决方案是使用 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"。如果您拥有的按钮的数量和类型是可预测的,并且您希望它们以一致的方式排列,无论它们如何放置在标记中,这可能很有用。
希望对您有所帮助。
我正在使用 Angular 1.5 创建一个可重复使用的项目选择器组件。选择器有一个搜索字段和一个可供选择的项目列表。选择器的一个示例用例是一个弹出窗口,用户在其中选择一些项目,然后有一个 "Continue" 按钮继续。
从概念上讲,搜索字段和项目列表属于组件,"Continue" 按钮属于周围的对话框。但是,我想将按钮放置在搜索字段旁边。在某些情况下没有额外的按钮,有时是一个额外的按钮,有时是两个。
像这样:
创建此类组件的最佳方法是什么?
我想到的选项:
为项目选择器创建一个组件/指令,将按钮放在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>
来包含从范围读取按钮配置的选择器代码。丑陋是缺乏范围界定和不使用组件。
是否有针对此类情况的最佳实践?
一种可能的解决方案是使用 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"。如果您拥有的按钮的数量和类型是可预测的,并且您希望它们以一致的方式排列,无论它们如何放置在标记中,这可能很有用。
希望对您有所帮助。