2013-08-23 2 views
0

Я строю сложную переменную компоновку с бесконечным пользовательским интерфейсом прокрутки в AngularJS.Директивы, службы & ng-repeat

Подумайте, что-то вроде Flipboard с нагрузкой повторяющихся элементов данных, каждый элемент содержит одно и то же (название, описание, изображение и т. Д.). Каждый элемент предварительно загружен в JSON, отсортирован, а затем организован в ряд страниц, выбранных из серии переменных макетов. Каждая страница имеет столбцы с переменным числом, а в каждом столбце - переменное количество строк.

Для этого я использую несколько директив для каждого макета страницы, скомпилированного во время выполнения. Внутри каждой директивы компоновки я создаю переменное количество столбцов, каждый из которых содержит ng-repeat для переменной числа строк. Каждая строка может быть другой Директивой, в зависимости от того, как ее нужно стилизовать. Опять же, все это происходит во время выполнения.

Я нахожусь на 99% пути оттуда.

Директивы собираются правильно и вызывают правильные столбцы Директивы, которые, в свою очередь, составляют правильное количество строк. Как только мы дойдем до уровня строки/пункта, я использую Сервис, который возвращает правильную Директиву для каждого элемента. Причина, по которой я выбираю подход «Сервис», заключается в том, что я хочу, чтобы элементы были повторно использованы внутри других модулей.

Проблема, с которой я столкнулся, заключается в том, что как только компоновка страницы скомпилирована, она устанавливает столбцы, а затем строки, но не выполняет ng-repeat. Мне нужно получить цикл ng-repeat, а также вызвать конкретные директивы, которые я использую для каждого элемента.

Я думаю, что это проблема, связанная с компиляцией $ и тем, что Angular знает о DOM. Возможно, мне нужно выполнить компиляцию $ или $ на каком-то этапе, чтобы получить ng-repeat, чтобы использовать и привязать конечные Директивы к элементам данных.

**

Side Примечание: если я не использую службу, а просто использовать определить каждую директиву макета с templateUri он прекрасно работает!

Я могу пойти с этим подходом, но в идеале я бы хотел уйти от загрузки кучи шаблонов во время выполнения. Кроме того, передавая параметры в Сервис, я могу создавать больше макетов, намного быстрее и легче, чем создавать отдельные файлы шаблонов.

Я создал скрипку JS с простой пример того, как я приближаюсь все это:

http://jsfiddle.net/joecarney/vE3Ls/6/

Некоторые SO требуется код просто разместить ссылку на этот комментарий:

<div ng-app="app" ng-controller="appPageController"> 
    <div> 
     <div my-page></div> 
    </div> 
</div> 
+0

, если вы строите с ворчанием, вы можете использовать 'ngtemplates' встраивать шаблоны в директивах. Затем вы не будете загружать дополнительные шаблоны во время выполнения. –

+0

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

ответ

0

Если вы используете scope: {} в директиве, он создает новую область, поэтому ваши директивы не будут иметь доступ к области контроллера, если вы не разрешите ее, которую вы начали делать, но появляется, после чего вы копируете и вставляете то же самое для всех :)

Директива по составлению элементов в ng-repeat не имела доступа к элементам. Я извлекал объем от директив и используется значение AttrS для доступа к атрибутам

http://jsfiddle.net/vE3Ls/7/

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