我正在编写一个可以动态创建动态菜单的模块。如何在使用css类<li>
添加新dropdown
后运行指令,该类也由ng-class添加。
代码:
angular.module('myapp', ['ui.bootstrap'])
.factory("menuService", ["$rootScope", function($rootScope) {
"use strict";
return {
menu: function() {
$rootScope.globalMenu;
},
setMenu: function(menu) {
$rootScope.globalMenu = menu;
}
};
}])
.controller("MainController", ["$scope", "menuService",
function($scope, menuService){
menuService.setMenu([{href:"#", label:"Dropdown",
dropdown:[{href:"/edit", label:"Edit"}]},
{href:'/', label:'test'}]);
$scope.bodyText = "Some text";
}]);
这是html中的代码
<ul class="navbar-nav nav navbar-left">
<li ng-repeat="menu_element in globalMenu" ng-class="{dropdown: menu_element.dropdown != undefined}">
<a ng-href="{{menu_element.href}}" ng-class="{'dropdown-toggle': menu_element.dropdown != undefined}">
{{menu_element.label}}
<b class="caret" ng-if="menu_element.dropdown != undefined"></b>
</a>
<ul ng-if="menu_element.dropdown != undefined" class="dropdown-menu">
<li ng-repeat="sub_element in $parent.menu_element.dropdown">
<a ng-href="{{sub_element.href}}">{{sub_element.label}}</a>
</li>
</ul>
</li>
</ul>
链接到plunker: http://plnkr.co/edit/pgH35mmsjLJqV4yJuSYq?p=preview
所以我想做的是和jQuery一样或类似,在添加完整的ul&gt; li块后我会运行$("li.dropdown").dropdown()
。我是Angular的新手,我想以有棱角的方式做到这一点。
我读到了指令,如何使用它们。但我找不到如何在运行时应用指令。我在一个指令(ui.bootstrap.dropdownToggle)中读到transclude: element
没有启用它。我确信有一种简单的方法,但我自己找不到......
答案 0 :(得分:5)
解决!
我最终使用ng-if
和ng-repeat-start
制作了它。在评论的帮助下,我发现ng-class
没有运行指令。
<ul class="navbar-nav nav navbar-left">
<span ng-repeat-start="menu_element in globalMenu"></span>
<li ng-if="menu_element.dropdown !== undefined">
<a ng-href="{{menu_element.href}}" class="dropdown-toggle">
{{menu_element.label}}
<b class="caret" ></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="sub_element in $parent.menu_element.dropdown">
<a ng-href="{{sub_element.href}}">{{sub_element.label}}</a>
</li>
</ul>
</li>
<li ng-if="menu_element.dropdown === undefined">
<a ng-href="{{menu_element.href}}">
{{menu_element.label}}
</a>
</li>
<span ng-repeat-end></span>
</ul>
Plnkr上的工作示例。在Plunker上发生了一些事情,昨天它正在运作......但它仍然有效。
答案 1 :(得分:1)
很好,这一直帮助了我。我的主题略有不同。
<ul class="nav navbar-nav">
<li ng-repeat='link in menu track by $index' ng-class='[{dropdown:link.sub}]'>
/* normal menu */
<a ng-if='!link.sub' ng-bind='link.id' ng-click='jump(link.to)'></a>
/* dropdown menu */
<a ng-if='link.sub' class="dropdown-toggle" data-toggle="dropdown">
<span ng-bind='link.id'></span>
<ul class="dropdown-menu inverse-dropdown">
/* and repeat for the submenu */
<li ng-repeat='slink in link.menu track by $index'>
<a ng-bind='slink.id' ng-click='jump(slink.to)'></a>
</li>
</ul>
</a>
</li>
</ul>
我的菜单数组是
的列表{id:'name', to:n}
其中n指向列出一些html的数组,我将其推入页面。当有子菜单时,菜单数组元素是
{id:'name', sub:true, menu:[{id:'name', to:n}, etc.]}
我尝试了ui-bootstrap,但从来没有理解过它。