角指令對於標籤

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，這些都不會滿足您的需要，但它們可能會讓您朝着正確的方向思考。

• 第一種方式，遞歸調用嵌入式模板，fully described in this blog post。注意模板列表項元素如何調用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> 
  

• 方式二，指令將subdirectives，illustrated in this fiddle:。縮小的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(); 
  }