Angular 1.5使用transclude或不使用transclude

有關在1.5.8角度組件中transclude的問題，以及它的用途。Angular 1.5使用transclude或不使用transclude

這裏是一些代碼的例子;

var app = angular.module('app', []) 

function AccordionController() { 
    var self = this; 
    // add panel 
    self.addPanel = function(panel) { 
    // code to add panel 
    } 

    self.selectPanel = function() { 
    //code to select panel 
    } 
} 

// register the accordion component 
app.component('accordion', { 
    template: '<!---accordion-template-->', 
    controller: AccordionController 
} 

function AccordionPanelController() { 
    // use parents methods here 
    var self = this; 

    // add panel 
    self.parent.addPanel(self); 

    // select panel 
    self.parent.selectPanel(self); 
} 

// register the accordion-panel component 
app.component('accordionPanel', { 
    // require the parent component 
    // In this case parent is an instance of accordion component 
    require: { 
    'parent': '^accordion', 
    template: '<!---accrodion-panel-template-->', 
    controller: AccordionController 
}

我的問題是將其使用transclude是父內更好地嵌套的所有根據面板或者可替換地通過在一個數據陣列，其這個循環出基於內部傳遞的陣列上的所需數量的面板的父使用綁定。

感謝

//添加您的回覆，一個例子，我有transclude的可能是必要的是在下面的代碼位

<modal modal-id="editCompany" title="Edit Company"> <company-form company="$ctrl.company"></company-form> </modal>

在這裏，我們有一個模式

非常感謝在上面的例子中，我可以添加公司表單中的各種其他組件，但是我們可以將它作爲聯繫表單。有其他方法嗎？

來源

2016-11-23 luke fisher

我已經非常廣泛地使用角。管理和顯示大量數據的兩個企業工具，數十個交互式小部件模塊，所有這些。

從來沒有，我曾與transclude有任何關係。在工作中，我們明確告訴不要使用它（鏈接功能）。我認爲這是一件好事，而Angular 2發現這似乎並不是沒有理由的。

我會與迭代去佈置所需數量的項目。在工作中，這不會是一個選擇，因爲transclude不是一種選擇。

來源

2016-11-23 12:03:33

您的回覆，一個例子非常感謝我的transclude可能是必要的是在代碼 '<模態-ID =「editCompany」稱號=「修改公司」> <公司下面的位 - 形式公司=「$ ctrl.company」> ' 這裏，我們有可能有多種在其內使用的其他組件，對上述的例子我加入公司模態分量表格，但這可能是我們的聯繫方式。有其他方法嗎？ –

絕對。使用服務。我寫的一個應用程序需要嵌套組件的彈出窗口（我實際上不喜歡整體用戶體驗，但有時候它是有道理的）。我剛剛創建了一個名爲PopupService的東西，它被注入彈出指令控制器。我通常認爲將數據視爲應用程序的一個完全獨立的層，並使用服務來保存並提供數據，而不是在視圖層次結構中上下發送事件等。我從來不會在組成部分的層次結構中出汗，也不應該;如果你修改UI標記，你會破壞你的代碼。 –

在組件體系結構中使用transclude的事情是，它在視覺上打破了與體系結構相關的單一責任和混亂的想法。

<html> 
    <navigation></navigation> 
    <accordion> 
    <accordion-panel></accordion-panel> 
    </accordion> 
    <footer></footer> 
</html>

在這個例子中，你知道你的頁面有一個導航菜單，一個手風琴和一個頁腳。但是在索引級別（或根分量），您不想知道/瞭解手風琴包含的內容。

所以手風琴面板組件應該只出現在它的直接父組件中。

至於你的其他問題，通過使用require或attributes你傳遞一個面板數組，你使用手風琴組件內的ng-repeat迭代。

app.component('accordion', { 
    template: `<accordion-panel ng-repeat="..."></accordion-panel>`, 
    controller: AccordionController 
}

來源

2016-11-23 12:41:33 gyc

完美，謝謝， –

Angular 1.5使用transclude或不使用transclude

回答

相關問題