Можно ли использовать angular ui.tree с вложенными директивами? - PullRequest
0 голосов
/ 16 июня 2020

В этом примере из Angular документации UI.Tree Ссылка ng-include используется для вложения подэлементов.

<script type="text/ng-template" id="nodes_renderer.html">
  <div ui-tree-handle>
    {{node.title}}
  </div>
  <ol ui-tree-nodes="" ng-model="node.nodes">
    <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'">
    </li>
  </ol>
</script>
<div ui-tree>
  <ol ui-tree-nodes="" ng-model="data" id="tree-root">
    <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li>
  </ol>
</div>

Я пытался заставить его работать, чтобы я мог используйте вместо этого директивы, но я столкнулся с проблемой, когда большинство методов мне больше не было доступно. Например, toggle () и expandAll () начали выдавать ошибки.

ContentNav.html

<div class="angular-ui-tree wiki-nav__content" id="tree-root" ui-tree>
    <ul class="angular-ui-tree-nodes" ui-tree-nodes="" ng-model="data">
        <li class="angular-ui-tree-node" ng-repeat="item in data" ui-tree-node collapsed="true">
            <content-nav-item item="item"></content-nav-item>
        </li>
    </ul>
</div>

ContentNavItem.html

<div ui-tree-handle class="nav-item tree-node tree-node-content angular-ui-tree-handle">
    <div class="left">
        <a data-nodrag class="sidebar-carret" ng-if="item.SubItems != null && item.SubItems.length > 0" ng-click="toggle(this)">
            <i class="icon fas fa-caret-right" ng-class="{'active': collapsed}"></i>
            <i class="icon fas fa-caret-down" ng-class="{'active': !collapsed}"></i>
        </a>
        <a data-nodrag href="/Content/company/{{item.Path}}">{{item.Icon}} {{item.Title}}</a>
    </div>

    <div class="right">
        <a data-nodrag><i class="fal fa-plus-square"></i></a>
        <a data-nodrag><i class="fas fa-grip-vertical"></i></a>
    </div>
</div>

<ul ui-tree-nodes="" ng-model="item.SubItems" ng-class="{hidden: collapsed}">
    <li ui-tree-node ng-repeat="item in item.SubItems" ng-include="'/Templates/Content/ContentNavItem.html'"></li>
</ul>

Что я могу сделать, чтобы подход к работе?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...