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>

如何使用angular指令完成？

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>

第二种方式，指令插入子指令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();
}

标签的角度指令

1 个答案: