twitter-bootstrap AngularJS + Bootstrap 动态添加下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21208810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamicly added dropdown menu in AngularJS + Bootstrap
提问by MichalMazurek
I'm writing a module that will create a dynamic menu on the fly. How to run a directive after adding new <li>with css class dropdownwhich is also added by ng-class.
The code:
我正在编写一个可以动态创建动态菜单的模块。如何在添加新<li>的 css 类后运行指令，该类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";
}]);
This is the code in html
这是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>
Link to plunker: http://plnkr.co/edit/pgH35mmsjLJqV4yJuSYq?p=preview
plunker 链接：http://plnkr.co/edit/pgH35mmsjLJqV4yJuSYq?p=preview
So what I want to do is the same or similar as for jQuery, there I would run $("li.dropdown").dropdown()after adding whole ul>li blocks. I'm new to Angular and I want to make this in the angular way.
所以我想要做的与jQuery相同或相似，我会$("li.dropdown").dropdown()在添加整个 ul>li 块后运行。我是 Angular 的新手，我想以有角度的方式制作它。
I read about directives, how to use them. But I couldn't find how to apply directive in runtime. I've read about transclude: elementin a directive (ui.bootstrap.dropdownToggle) doesn't have it enabled. I'm sure that there is a easy way, but couldn't find it myself...
我阅读了指令，以及如何使用它们。但是我找不到如何在运行时应用指令。我transclude: element在指令 (ui.bootstrap.dropdownToggle) 中读到没有启用它。我确定有一种简单的方法，但我自己找不到...
回答by MichalMazurek
Solved!
解决了！
I've finally made it with ng-ifand ng-repeat-start. With help in comments, I've found that ng-classdoes not run directives.
我终于用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>
Working example on Plnkr. Something happened with the css on Plunker, yesterday it was working... but still it works.
Plnkr上的工作示例。Plunker 上的 css 发生了一些事情，昨天它正在工作......但它仍然有效。
回答by jwal
Nice, this helped me along the way. I've a slight variation on your theme.
很好，这对我一路有帮助。我对你的主题略有不同。
<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>
My menu array is a list of
我的菜单数组是一个列表
{id:'name', to:n}
where n points to an array listing some html I push into the page. When there is a sub menu the menu array element is
其中 n 指向一个数组，其中列出了我推入页面的一些 html。当有子菜单时，菜单数组元素为
{id:'name', sub:true, menu:[{id:'name', to:n}, etc.]}
I tried ui-bootstrap but never got my head around it.
我尝试了 ui-bootstrap，但从来没有想过它。
