Динамическое добавление директив в AngularJS

Question

[djakomo]

Добрый день!

Более опытные товарищи, подскажите пожалуйста, как в Angular правильнее реализовать следующую мысль с динамическим добавлением табов с гридами.

Имеем одностраничное приложение, с левой стороны — меню, с правой — контейнер для табов.
Необходимо, при клике пользователем на меню — справа добавлять таб с гридом.
пример как это выглядит:


Сделал директиву для грида — <gird></grid>, если прописать ее в html-коде, то она работает.

Но как правильно реализовать ее динамическое добавление при клике не очень понимаю.

Как черновой вариант сделал через $compile, что то вроде
var el = $compile('<grid></grid>'); $('#container').append(el)

Но не уверен что это верный способ реализации данной функциональности.

Спасибо!

Comments

[djakomo]

Сори, парсер сьел некоторые символы.

*Сделал директиву для грида — <grid></grid>

*Как черновой вариант сделал через $compile, что то вроде
var el = $compile('<grid></grid>'); $('#container').append(el)

Answer 1

[avorobiev]

Что-то ваш код похож на jQuery-стиль. На AngularJS все по другому…
Пункты меню с левой панели должны быть ссылками, с разными URL. Соответвенно при клике на них через роутинг должны подгружаться соответствующие темплейты и наполняться данными. Посмотрите примеры на этот счет в интернете.
Т.е. ключевой ответ на ваш вопрос, насколько я его понял: роутинг + подгружаемые темплейты.

Comments

[djakomo]

Спасибо!
Да, похож, и думаю это неверно в контексте angularjs — поэтому и возник вопрос :)

мысль про роутинг и темплейты понял, спасибо попробую разобраться.

Если в темплейтах подгружаемых можно использовать директивы, верно?

[Антон]

у диркетивы ng-include можно динамически формировать имя подгружаемого шаблона — думаю это вам поможет

Answer 2

[EugeneOZ]

Если табы справа должны добавляться — добавьте их все заранее и включайте по ng-show.
Если слева именно переключатель табов — либо ng-switch, либо ng-view с роутингом. Но ng-view на странице может быть только один, а я там вижу два каталога разных табов.

Comments

[djakomo]

EugeneOZ, спасибо
но здесь не известны все табы заранее, меню слева формируется динамически, заранее оно не известно.
Соответственно задать все табы заранее нет возможности.

Answer 3

[mrakolice]

Главное преимущество AngularJS — связь данных в JavaScript'e с их репликацией на DOM-элементы.
Мне кажется, Вам необходима следующая схема:

1. Завести массив вкладок в контроллере и привязать его к scope
2. Для правой стороны написать ng-repeat по этим вкладкам
3. Прикрепить событие (ng-click), чтобы по нажатию на таб подгружалась необходимая вьюшка

Для вьюшки использовать ng-include.

Comments

[djakomo]

mrakolice, спасибо
в итоге примерно к этому и пришел — plnkr.co/edit/yVAFAk8nFfI45VEsjVZ3?p=preview

[Алексей К.]

@djakomo Но ведь при каждом добавлении нового элемента у вас перерисовываются все табы - это же отрицательно влияет на производительность, или я ошибаюсь?

[mikhailrojo]

Спасибо, твой ответ подсказал мне хорошую идею!