標簽的角度指令

Question

我想更換

<ul class="inner-nav">
    <li><a href="#/a"><i class="icol-layout-select"></i> aaa</a></li>
    <li><a href="#/b"><i class="icol-ui-text-field-password"></i> bbb</a></li>
    <li><a href="#/c"><i class="icol-wand"></i> ccc</a></li>
</ul>

有了這個：

<submenu>
<submenu_item icon="layout-select" href="a">aaa</submenu_item>
<submenu_item icon="ui-text-field-password" href="b">bbb</submenu_item>
<submenu_item icon="wand" href="c">ccc</submenu_item>
</submenu>

如何使用角度指令完成此操作？

Answer 1

我已經看到這樣做有兩種方式。 在每種情況下，菜單結構均表示為范圍內的對象，並通過使用指令進行呈現。 如果您需要使菜單定義保持在標記內，即您需要在html中包含aaa ，則這兩者都無法滿足您的需求，但是它們可能會讓您朝着正確的方向進行思考。

• 第一種方法是使用內聯模板進行遞歸調用， 此博客文章中對此進行了全面介紹 。 注意模板如何在列表項元素中調用ng-include ：

   <script type="text/ng-template" id="tree-renderer.html"> <a href="{{menu.url}}">{{ menuItem.name }}</a> <ul> <li ng-repeat="menuItem in menuItem.children" ng-include="'tree-renderer.html'> </li> </ul> </script> 

• 第二種方法，偽指令插入子指令， 如該小提琴所示： parentTreeNavigation了parentTreeNavigation模板的外觀，如下所示。 請注意has-dropdown如何取決於node.children的值，並且在每種情況下都會插入sub-navigation-tree元素：

   <ul id="parentTreeNavigation"> <li ng-repeat="node in ' + attrs.menuData + '"ng-class="{\\'has-dropdown\\': !!node.children && node.children.length}"> <a ng-href="{{node.href}}" ng-click="{{node.click}}" target="{{node.target}}" > {{node.text}} </a> <sub-navigation-tree></sub-navigation-tree> </li> </ul> 

  如果沒有子代，則sub-navigation-tree指令刪除該元素：

   if(scope.tree.children && scope.tree.children.length ) { var template = angular.element(//template code); var linkFunction = $compile(template); linkFunction(scope); element.replaceWith( template ); } else { element.remove(); }