2015-04-09 3 views
0

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

У меня есть массив объектов, которые являются одним из трех типов.

Я хотел бы использовать директиву ng-repeat для итерации по этому массиву и отображения объектов на странице.

Каждый тип объекта имеет другое представление, связанное с ним, поскольку каждый объект обладает некоторыми свойствами, но также имеет уникальные свойства.

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

Так что логика что-то вроде следующего работы:

<div ng-repeat="item in dataset"> 
    <the-smart-directive>item</the-smart-directive> 
</div> 

Одна идея будет иметь одну директиву, где я определить templateUrl на основе типа объекта, а затем иметь уникальный шаблон для каждого из объектов ,

Другой идеей было бы иметь родительскую директиву, а затем три другие директивы (по одному для каждого типа объекта), а родительская директива ввела бы правильную директиву типа объекта (это идея, которая кажется лучшим подходом, но я «Не знаю, как реализовать эту идею».

Мне очень нужна помощь в понимании наилучшего способа решения этой проблемы и способа ее реализации. Если бы вы могли предоставить некоторый пример кода, который был бы замечательным и заставить меня начать по правильному пути.

Благодарим за помощь!

+0

Фактически многочисленные способы сделать это ... директивы чрезвычайно мощные и гибкие. Игра с различными частями директивы - лучший способ узнать. – charlietfl

ответ

3

Способ, которым мы его используем, - ng-switch внутри ng-repeat.

<div ng-repeat="item in dataset" ng-switch="item.type"> 
     <directive-one ng-switch-when="1"> 
     </directive-one> 
     <directive-two ng-switch-when="2"> 
     </directive-two> 
     <directive-three ng-switch-when="3"> 
     </directive-three> 
</div> 
+0

Это близко к «другой идее» родительской директивы, вызывающей соответствующую другую директиву. – ryanyuyu

+0

Это именно то, что я искал, но не понимал, что у Углового уже есть что-то, что я мог бы использовать. Спасибо! – Zigrivers

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