2013-12-13 2 views
0

У меня есть список элементов разных типов. У каждого есть переключатель, который переключает их видимость. Теперь есть два способа скрыть элемент либо отделить его от DOM, либо установить видимость на скрытый.Каковы наилучшие методы создания новых элементов разного типа в Angularjs?

Как я понимаю, Angular все еще обновляет скрытые элементы, поэтому это может повлиять на производительность. Это правда? С помощью jQuery можно отсоединить элемент от DOM, а затем снова прикрепить его, когда он должен быть видимым. Но является ли этот подход даже хорошей практикой в ​​Angular?

Из-за чтения Угловой документации и ее API мне показалось, что Angular предпочитает, чтобы все шаблоны/HTML были объявлены в начале, и их содержимое динамически изменяется с помощью контроллеров. Поэтому, если вы хотите добавить/удалить элементы, вы должны использовать директиву ng-repeat, а затем, удалив элементы из массива в области, вы можете добавить/удалить элементы из шаблона. Это хорошо работает с примитивными элементами того же типа. Однако как это работает, если у вас есть список элементов разного типа?

Отредактировано:

http://jsfiddle.net/k26bA

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

У второго подхода есть список в контроллере, на который вы добавляете и удаляете инструменты, а в шаблоне используйте ng-repeat, чтобы перебирать этот список и создавать инструменты. Тем не менее, я застрял здесь, поскольку инструментом может быть кнопка, текстовое поле, флажок или даже сложный div.

Здесь мне немного сложно найти model first, потому что это только часть, которая скрывает и показывает доступные элементы управления, а не отображение модели домена.

Хорошим примером того, что я думаю, будет Google Maps, где вы можете скрыть или свести к минимуму различные элементы управления на карте.

+0

Было бы полезно, если бы вы предложили скрипку, о которой вы хотели бы достичь. – Sprottenwels

+2

вы не думаете 'model first'. Вы модифицируете модель и позволяете угловому управлению обновлениями DOM. Создайте демо, в котором описывается то, что вы пытаетесь сделать. Очень непонятно, что такое «разный тип». – charlietfl

+0

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

ответ

0

Вам должно быть знакомятся с ng-switch directive. Неактивные элементы в ng-switch полностью отвязаны от DOM, в отличие от ng-hide или ng-show, которые просто устанавливают стили CSS для отображения или скрытия.

+0

О, я благодарю вас за это. Как-то я пропустил эту директиву. Это похоже на хороший способ привязать различные элементы к DOM условно. Есть еще один, с которым я столкнулся, называется ng - если это поможет мне скрыть и показать элементы. Как насчет динамического добавления различных элементов в какой-либо div/area, знаете ли вы какие-либо хорошие угловые способы сделать это? С ng-switch и ng - если вам нужно заранее знать, какие элементы у вас будут. Может быть, я должен создать еще один вопрос для этого, так как ваш ответ в значительной степени отвечает моему первоначальному вопросу. –

+0

Да, 'ng-if' тоже приятно. У меня еще не было возможности работать с версией 1.2, поэтому 'ng-if' еще не в моей сумке трюков. Мне нужно обновить мои проекты =) Отправьте ссылку на свой новый вопрос здесь, и я посмотрю. – FMM

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