2
我有一個問題再次打擾你，從我的缺乏JS-經驗而產生的;）...AngularJS殺死了我的JavaScript函數
我有使用JavaScript功能的側邊欄模板，應該在點擊父項時顯示一個子菜單。 如果我硬編碼側邊欄一切正常。
但是我想要的是使用angularJS'ng-repeat動態構建該菜單。 當我嘗試這個，菜單不會崩潰了。
下面是rebuid問題（我希望沒有被周圍的清潔無關的代碼，用於重建例如他媽的）爲例：
所以首先我們已經得到了下面的文件結構：
- 資產
- angularjs
- angular.min.js
- 自舉
- 字體真棒
- 的jquery
- 的jquery.js（v.1.10.2）
- angularjs
- 公共
- JS
- template.js
- JS
- 視圖
- 的index.html
- 解DE.json
索引。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.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();
});
正如你可以選擇e我已經對側邊欄的最後一項（示例頁面）進行了硬編碼，它應該可以工作。上面的部分沒有。
我知道這個例子很嚇人，但我不知道如何減少它，讓你只需重建問題。
無論如何，我希望有人能幫助我。
問候 本