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

回答

相关问题