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

我使用Angular 1.5创建了可重用的项目选择器组件。选取器有一个搜索栏和一个可供选择的项目列表。选择器的一个示例用例是一个弹出窗口，用户选择一些项目，然后有一个“继续”按钮继续。将多个“按钮”参数传递给Angular组件

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

事情是这样的：

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

选项，我认为：

创建项目选取器组件/指令，之前或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>来包含从示波器读取按钮配置的选取器代码。丑陋是缺乏范围和不使用组件。

这种情况是否有一些最佳实践？

来源

2016-09-23 Sampo

可能有第四个选项是使用[ng-transclude]（https://docs.angularjs.org/api/ng/directive/ngTransclude） – o4ohel

@ o4ohel看起来就像我想要的。谨慎写一个答案？（我也可以写一个） – Sampo

一个可能的解决方案是使用NG-transclude，所以你的代码可能看起来是这样的：

标记

指令

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进行推理，因为它将位于组件的上下文中。

注意你也可以利用“多槽插入”。这可能有用，因为您拥有的按钮的数量和类型是可预测的，并且您希望它们以一致的方式排列，而不管它们如何放置在标记中。

希望这会有所帮助。

来源

2016-09-23 17:56:36 o4ohel

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

回答

相关问题