2016-11-23 2 views
1

Вопрос о трансключении в угловой компонент 1.5.8 и его использование.Угловой 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> 

Здесь мы имеем модальность компонент, который может содержать в себе множество других компонентов, в приведенном выше примере я добавляю форму компании, но это может быть контактная форма. есть ли альтернативный способ?

ответ

0

Я работал с угловым довольно широко. Два инструментария предприятия, управляющие и отображающие большие объемы данных, десятки интерактивных модулей виджета, все это.

Никогда, однажды, я не имел ничего общего с трансключением. На работе нам прямо сказано не использовать его (функции ссылок тоже). Я думал, что это хорошо, и, как выяснилось, Угловой 2 казалось, что мышление не было совершенно без причины.

Я бы пошел с итерацией, чтобы выложить необходимое количество предметов. На работе это не будет выбором, потому что transclude не будет вариантом.

+0

Большое спасибо за ответ, пример я имею transclude, возможно, является необходимым в следующем кусочке кода '<модальный модальный-ID =«editCompany»название =«Редактировать Компания»> <компании -form company = "$ ctrl.company"> ' Здесь у нас есть модальный компонент, который может содержать в себе множество других компонентов, на примере выше. Я добавляю компанию формы, но это может быть контактная форма. есть ли альтернативный способ? –

+0

Абсолютно. Используйте сервис. Одно приложение, которое я написал, требует всплывающих окон с вложенными компонентами (мне действительно не нравится этот общий UX, но иногда это имеет смысл).Я только что создал что-то, называемое PopupService, которое вводится в контроллер всплывающих указателей. Обычно я считаю, что обработка ваших данных как полностью отдельного слоя вашего приложения и использование сервисов для хранения и предоставления этих данных, в отличие от отправки событий вверх и вниз по иерархии представлений и т. Д., Является более чистым. Я никогда не потею, где в иерархии компонент, и не должен; если вы переработаете разметку UI, вы нарушите свой код. –

0

Вещь с использованием 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 
} 
+0

Отлично, спасибо, –

Смежные вопросы