javascript 带有 Ionic、angularjs、bootstrap 3 的左侧多级菜单无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24816322/
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
Leftside multilevel menu with Ionic, angularjs, bootstrap 3 didnt work properly
提问by andrescabana86
i need this 
我需要这个
this is the controller code:
这是控制器代码：
$scope.sideNavMenu =
{
title: "User Manual",
subMenu: [
{
title: "Title one",
link: "index/titleone.html",
icon:"fa fa-caret-down",
subMenu: []
},
{
title: "Basic",
link: "index/basic/basic.html",
icon:"fa fa-caret-down",
subMenu: [
{
title: "Basic Function",
link: "index/basic/function.html",
icon:"fa fa-caret-down",
subMenu: []
}]
}]
};
i have been two weeks trying to solve. please any can help me?
我已经两个星期试图解决。请有人可以帮助我吗？
this is as far as it went
到此为止
<div id="MainMenu">
<div class="list-group panel">
<a href="#mainMenuContainer" class="list-group-item list-group-item-success strong" data-toggle="collapse" data-parent="#MainMenu">
<i class="fa fa-home"></i>
{{sideNavMenu.title}}
<i class="fa fa-caret-down"></i>
</a>
<div ng-include ng-if="sideNavMenu.subMenu.length > 0" ng-repeat="navMenu in sideNavMenu.subMenu" onload="data = navMenu" src="'menuTemplate.html'"class="collapse" id="mainMenuContainer">
</div>
</div>
template
模板
<script id="menuTemplate.html" type="text/ng-template">
<a ng-href="#{{ (data.subMenu.length > 0) && data.link || ''}}" class="list-group-item {{(data.subMenu.length > 0) && 'strong' || ''}}" data-toggle="collapse" data-parent="{{data.link}}">{{data.title}}<i class="fa fa-caret-down"></i></a>
<div ng-include ng-repeat="navMenu in data.subMenu" onload="data = navMenu" src="'menuTemplate.html'" class="list-group-submenu" ng-if="data.subMenu.length > 0" ng-attr-id="{{data.link}}">
</div>
</script>
here an example that i use to understand
and this is the result
这就是结果
when i click nothing happends
当我点击什么都没发生
Console: Syntax error, unrecognized expression: index/titleone.html
控制台：语法错误，无法识别的表达式：index/titleone.html
回答by Blaskovicz
Your menu is basically just a bunch of nested lists; after looking at this post, I was able to take your subMenu data structure and adapt it to generate a simple list:
您的菜单基本上只是一堆嵌套列表；看完这篇文章后，我能够采用您的 subMenu 数据结构并对其进行调整以生成一个简单的列表：
HTML
HTML
<div ng-app>
<script type="text/ng-template" id="menu-renderer">
{{item.title}}
<ul ng-if="item.subMenu && item.subMenu.length > 0">
<li ng-repeat="item in item.subMenu" ng-include="'menu-renderer'"></li>
</ul>
</script>
<div ng-controller="MenuCtrl">
<ul>
<li ng-repeat="item in subMenu" ng-include="'menu-renderer'"></li>
</ul>
</div>
</div>
Javascript
Javascript
function MenuCtrl($scope) {
$scope.subMenu = [
{
title: "User Manual",
subMenu: [
{
title: "Title one",
link: "index/titleone.html",
icon:"fa fa-caret-down",
subMenu: []
},
{
title: "Basic",
link: "index/basic/basic.html",
icon:"fa fa-caret-down",
subMenu: [
{
title: "Basic Function",
link: "index/basic/function.html",
icon:"fa fa-caret-down",
subMenu: []
}]
}]
}];
}
I have this fiddleif you'd like to see it in action.
如果你想看看它的实际效果，我有这个小提琴。
Does that help?
这有帮助吗？
回答by JimTheDev
Here is a frankensteined example of infinite level Bootstrap 3 accordions working with Angular and Angular-UI Bootstrap. This code can (and should) certainly be improved as noted in this post, but shows that they can work together and how you might go about doing that: Looping through deep objects in ng-repeat
这是一个与 Angular 和 Angular-UI Bootstrap 一起使用的无限级 Bootstrap 3 手风琴的弗兰肯斯坦示例。这段代码当然可以（也应该）像这篇文章中提到的那样改进，但表明它们可以一起工作，以及你可以如何去做：循环遍历 ng-repeat 中的深层对象
index.html
索引.html
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<script src="example.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<accordion close-others="oneAtATime">
<accordion-group heading="Home" is-open="getOpenedStatus" ng-init="setOpenedStatus(false);">
<accordion-heading>
<a class="accordion-toggle">
<i class="fa fa-home"></i>
Home
</a>
</accordion-heading>
<accordion close-others="oneAtATime">
<accordion-group ng-repeat="group in group.groups" is-open="getOpenedStatus" ng-init="setOpenedStatus(true);">
<accordion-heading>
<a class="accordion-toggle">
{{group.title}}
</a>
</accordion-heading>
{{group.content}}
<div nested-item>
</div>
</accordion-group>
</accordion>
</accordion-group>
</accordion>
</div>
</body>
</html>
example.js
例子.js
var app = angular.module('plunker', ['ui.bootstrap']);
var groups = {
groups:[
{ title: "Dynamic Title 1", content: "Dynamic content 1" },
{ title: "Dynamic Title 2", content: "Dynamic content 2", groups: [
{title: "Subnav Title 1", content:'Subnav content 1'},
{title: "Subnav Title 2", content:'Subnav content 2', groups:[
{title: "Sub-subnav Title1", content: 'subsubnav content 1'}
]}
]}
]};
function AccordionDemoCtrl($scope) {
$scope.isMenuOpenedInitially = false;
$scope.staticTitle = "Static Title";
$scope.group = groups;
$scope.setOpened = function(isOpened) {
$scope.opened = isOpened;
};
$scope.getOpenedStatus = function() {
return $scope.opened;
};
$scope.toggleRoot = function(){
return isMenuOpenedInitially;
};
}
app.directive('nestedItem', ['$compile', function($compile){
return {
restrict: 'A',
link: function(scope, element){
// alert(scope.group.groups);
if (scope.group.groups){
// var html=$compile('<h1>test</h1>')(scope);
// var html = $compile('<ul><li nested-item ng-repeat="group in group.groups">{{group.title}}</li></ul>')(scope);
var html=$compile(''+
'<accordion close-others="oneAtATime">' +
'<accordion-group ng-repeat="group in group.groups" is-open="opened" ng-init="setOpened(true);">'+
'<accordion-heading>' +
'<a class="accordion-toggle" ng-click={{opened}}>'+
'{{group.title}}'+
'</a>'+
'</accordion-heading>'+
'{{group.content}}'+
'<div nested-item>'+
'</div>'+
'</accordion-group>'+
'</accordion>'
)(scope);
element.append(html);
}
}
};
}]);
回答by Zentoaku
In general what you're trying to do is a tree view. Check the source code of: http://ngmodules.org/modules/angular.treeviewand/or look for other example implementation of those and adapt them to your needs.
一般来说，您要做的是树视图。检查源代码：http: //ngmodules.org/modules/angular.treeview和/或寻找其他示例实现并根据您的需要调整它们。
