Блог

Главная - Вопросы по программированию - Angular.js как создать директивы вложенного дерева из данных JSON

Angular.js как создать директивы вложенного дерева из данных JSON

#angularjs #angularjs-directive #angularjs-ng-repeat

#angularjs #angularjs-директива #angularjs-ng-repeat

Вопрос:

Дана директива Angular со следующим DOM API:

 <my-tree>
  <my-tree-item>First</my-tree-item>
  <my-tree-item>Second</my-tree-item>
  <my-tree-item>Third</my-tree-item>

  <my-tree-group>
    A group

    <my-tree-item>Forth</my-tree-item>
    <my-tree-item>Fifth</my-tree-item>
    <my-tree-item>Sixth</my-tree-item> 
  </my-tree-group>
</my-tree>

Как я могу создать что-то подобное с шаблоном и следующей структурой данных:

 [
        {
            name: 'First'
        },
        {
            name: 'Second'
        },
        {
            name: 'Third'
        },
        {
            name: 'A group',
            children: [
                {
                    name: 'Forth'
                },
                {
                    name: 'Fifth'
                },
                {
                    name: 'Sixth'
                }
            ]
        }
    ]

Реальная структура данных может продолжаться до любой глубины.

ng-repeat и ng-switch кажутся необходимыми, но требуют или оставляют дополнительные узлы DOM. Например, что следует включить в ng-repeat, поскольку элемент может быть 1 из 2 типов. При использовании ng-switch это, казалось, помогло, используя его как элемент, но это оставляет ng-switch в DOM.

Я рассматривал возможность объединения my-tree-item и my-tree-group, но наличие отдельных директив, похоже, имеет смысл, поскольку my-tree-group будет иметь дополнительные опции, которые не применяются к обычным элементам.

Есть ли способ использовать Angular для создания именно такой структуры без дополнительных узлов?

Есть ли лучший способ справиться с этим?

Комментарии:

1. Какие проблемы вызывают дополнительные узлы?

2. можно использовать replace:true в директиве, чтобы не существовало дополнительных узлов

3. @MattWay эти директивы нацелены на существующую базу кода. Дополнительные узлы нарушают определенные предположения, которые код делает о структуре DOM, что нарушает функциональность и стиль.

4. @charlietfl replace:true не избавляет от дополнительных узлов, созданных ng-switch, и не помогает избавиться от дополнительной оболочки, необходимой для цели ng-repeat.

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

Ответ №1:

Что вам нужно сделать, это создать директиву для работы с требуемой иерархией. Вы передаете свой объект json директиве через атрибут <div my-tree="somejsonobj"></div> , а затем директива создает требуемый DOM.

Выполните цикл директивы по текущему уровню иерархии JSON и создайте соответствующие узлы. Если текущий элемент имеет children (на основе приведенной выше схемы), затем создайте узел DOM, который сам по себе является новым экземпляром вашей директивы, но передает текущий элемент с дочерними элементами в качестве корня.

Очевидно, что это было бы намного проще, если бы вы были согласны с созданием дополнительных узлов ng-repeat , поскольку вам не понадобились бы никакие пользовательские директивы.

Вот краткий пример сообщения, которое я нашел в директивах, подобных дереву: http://blog.stackfull.com/2014/02/trees-in-angularjs /