В этом примере из 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>
Что я могу сделать, чтобы подход к работе?