由于我缺乏JS-Experience，我不得不再次打扰你一个问题;）...
我有一个侧边栏使用javascript函数的模板，当点击父项时应显示子菜单。 如果我对侧边栏进行硬编码，一切正常。
但我真正想要的是使用angularJS'ng-repeat动态构建该菜单。 当我尝试这个时，菜单不再崩溃。
这是一个重建问题的例子（我希望通过清理周围不相关的代码，以重建示例而不会搞砸）：
首先，我们得到了以下文件结构：
index.html看起来像：
<!DOCTYPE html>
<html ng-app id="ng-app" ng-controller="languageKey">
<head>
<title>{{ lg.website }}</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<style>
#main-nav .sub-nav {
display: none;
list-style-type: none;
padding: 1em 0;
padding-left: 25px;
margin-top: 0;
margin-bottom: 0;
border-bottom: none;
position: relative;
top: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<nav id="sidebar">
<ul class="open-active" id="main-nav">
<li class="dropdown" ng-repeat="lang in lg.sidebar.menuItems">
<a href="javascript:;">
<i class="fa fa-{{ lang.icon }}"></i>
{{ lang.title }}
<span class="caret"></span>
</a>
<ul class="sub-nav">
<li ng-repeat="sub in lang.subItems">
<a href="#">
<i class="fa fa-{{ sub.icon }}"></i>
{{ sub.title }}
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:;">
<i class="fa fa-file-text"></i>
Example Pages
<span class="caret"></span>
</a>
<ul class="sub-nav">
<li>
<a href="./page-profile.html">
<i class="fa fa-user"></i>
Profile
</a>
</li>
<li>
<a href="./page-invoice.html">
<i class="fa fa-money"></i>
Invoice
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<script src="../assets/jquery/jquery.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/angularjs/angular.min.js"></script>
<script src="../public/js/template.js"></script>
<script>
function languageKey($scope, $http)
{
$http({method: 'POST', url: 'de-DE.json'}).success(function(data)
{
$scope.lg = data; //response Data
});
}
</script>
</body>
</html>
de-DE.json看起来像：
{
"website":"Website Name",
"sidebar": {
"menuItems": [
{
"title":"Dashboard",
"icon":"dashboard"
},
{
"title":"Musik verwalten",
"icon":"file-text",
"subItems": [
{
"title": "Songs hochladen",
"icon": "user"
},
{
"title": "Diskografie",
"icon": "money"
},
{
"title": "Statistik",
"icon": "dollar"
}
]
},
{
"title":"Einstellungen",
"icon":"tasks",
"subItems": [
{
"title": "Benutzer",
"icon": "location-arrow"
},
{
"title": "Anfragen",
"icon": "magic"
},
{
"title": "Einstellungen",
"icon": "check"
},
{
"title": "Sprachen",
"icon": "check"
},
{
"title": "Neuigkeiten",
"icon": "check"
}
]
}
]
}
}
最后是template.js：
var App = function () {
"use strict";
var chartColors = ['#e5412d', '#f0ad4e', '#444', '#888','#555','#999','#bbb','#ccc','#eee'];
return { init: init, chartColors: chartColors, debounce: debounce };
function init () {
initLayout ();
}
function initLayout () {
$('#site-logo').prependTo ('#wrapper');
$('html').removeClass ('no-js');
Nav.init ();
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) {
e.stopPropagation();
});
}
function debounce (func, wait, immediate) {
var timeout, args, context, timestamp, result;
return function() {
context = this;
args = arguments;
timestamp = new Date();
var later = function() {
var last = (new Date()) - timestamp;
if (last < wait) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if (!immediate) result = func.apply(context, args);
}
};
var callNow = immediate && !timeout;
if (!timeout) {
timeout = setTimeout(later, wait);
}
if (callNow) result = func.apply(context, args);
return result;
};
}
}();
var Nav = function () {
return { init: init };
function init () {
var mainnav = $('#main-nav'),
openActive = mainnav.is ('.open-active'),
navActive = mainnav.find ('> .active');
mainnav.find ('> .dropdown > a').bind ('click', navClick);
if (openActive && navActive.is ('.dropdown')) {
navActive.addClass ('opened').find ('.sub-nav').show ();
}
}
function navClick (e) {
e.preventDefault ();
var li = $(this).parents ('li');
if (li.is ('.opened')) {
closeAll ();
} else {
closeAll ();
li.addClass ('opened').find ('.sub-nav').slideDown ();
}
}
function closeAll () {
$('.sub-nav').slideUp ().parents ('li').removeClass ('opened');
}
}();
$(function () {
App.init ();
});
正如您所看到的，我已经硬编码了侧边栏的最后一项（示例页面），它应该可以正常工作。上面的部分没有。
我知道这个例子很长，但我不知道如何以一种让你简单地重建问题的方式来减少它。
无论如何，我希望有人可以帮助我。
祝你好运 本
答案 0 :(得分：1)
简短的回答是，你的init函数发生在角度构建DOM之前。您知道jQuery需要等待文档准备好做大多数事情吗？好吧，想象一下这个文件正在发生变化。那是棱角分明的。您的文档是100％动态的。您的navclick函数未绑定到ng-repeat中的任何内容...因为ng-repeat尚未创建任何内容。
将角度添加到现有的javascript应用程序非常棘手。实现这一目标的最简单方法是删除现有的jQuery并在Angular中尝试全部。起初这看起来令人生畏，但它可能很容易！使用ng-click替换navclick等