2015-07-07 2 views
6

У меня есть этот объект в Угловом.Рекомендации: должен ли я использовать ng-switch для этого?

$scope.columns = { 
    workspace: { 
     title: "Workspace", 
     type: "workspace", 
     activities: [] 
    }, 
    alerts: { 
     title: "Alerts", 
     type: "alert", 
     activities: [] 
    }, 
    main: { 
     title: "Main Feed", 
     type: "main", 
     activities: [] 
    } 
}; 

И в моем HTML я должен петли через него, чтобы динамически создать серию колонок в моем приложении (думаю, что что-то вроде Trello)

Каждый type является ссылкой на пользовательской директивы.

Я пытаюсь найти лучший способ разместить мои директивы.

На основании этих данных приведенный ниже код подходит для динамического их создания.

<div ng-repeat="(key, obj) in columns"> 

    <div ng-switch on="obj.type"> 
     <workspace-feed ng-switch-when="workspace" /> 
     <alert-feed ng-switch-when="alert" /> 
     <main-feed ng-switch-when="main" /> 
     <filter-feed ng-switch-when="filter" /> 
    </div> 

</div> 

Я хотел бы быть в состоянии сделать что-то вроде ... <{{obj.type}}-feed />, но я не уверен, если это верно, или если есть лучший способ, чтобы создать это.

Мысли очень ценятся!

+0

Что не так с ngSwitch? – dfsq

+0

Это выглядит хорошо. Насколько отличается каждый канал? Возможно, вам не нужны отдельные директивы для каждого фида - возможно, вы можете использовать одну директиву, которая динамически загружает шаблон на основе типа столбца. Это зависит от ваших столбцов. – Agop

+0

@dsfq - ничего страшного в этом, я просто ищу «лучшие практики» для чего-то вроде этого. –

ответ

2

Что вы до сих пор хорошо смотрели.

В зависимости от того, насколько отличаются ваши столбцы, вы можете использовать только одну директиву, которая динамически загружает шаблон вместо нескольких директив. Например, взгляните на ng-include:

<div ng-include="'columns/' + column.type + '.html'"></div> 
Смежные вопросы