标记的角度指令
Angular Directives For Tags
本文关键字:指令 更新时间:2023-09-26
我想更换
<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>
如何使用角度指令来完成此操作?
我看到这有两种方法。在每种情况下,菜单结构都表示为范围内的对象,并通过使用指令来呈现。如果您需要将菜单定义保留在标记中,即,您需要在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
的模板如下所示。注意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(); }
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 参数变量出现ngTable指令问题
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 使用每次都不同的transclude重复指令
- 打开一个模态并将其链接到AngularJS中的指令
- 从html创建一个指令,该指令按类名应用函数
- 将JSON对象传递给angular指令
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- JavaScript指令不能像我想象的那样工作
- AngularJs指令,该指令创建内部有数据对象的新指令
- AngularJS指令只识别双向绑定类型
- 从控制器继承了隔离的作用域以生成可重用的指令
- AngularJS指令出错-无法读取属性'编译'的未定义
- Angular指令在alertify setContent内容中不起作用
- 对父作用域的指令更新延迟了一步
- 指令的模板必须只有一个根元素:With restrict E&替换true
- AngularJS指令单元测试中未定义的函数
- 指令加载真的很长,检查加载时间的方法
- AngularJS指令,在元素后插入HTML
- 两个指令创建新的继承的和隔离的作用域-元素得到哪个