將多個「按鈕」參數傳遞給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組件

回答

相關問題