0

我想更换

<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 指令来做到这一点？

4

1 回答 1

1

我已经看到这有两种方式。在每种情况下，菜单结构都表示为范围内的对象，并通过使用指令呈现。如果您需要将菜单定义保留在您的标记中，即，您需要aaa在 html 中，这些都不会满足您的需求，但它们可能会让您朝着正确的方向思考。

  • 第一种方式，使用内联模板进行递归调用，在这篇博文中有详细描述。请注意模板如何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>

  • 第二种方式，指令插入子指令，在这个小提琴中说明： . de-minified的模板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();
}
于 2013-08-28T15:47:25.600 回答