я должен вас беспокоить снова с вопросом, в результате чего из моего отсутствия JS-опыт;) ...AngularJS убивает мой Javascript Функция
У меня есть шаблон, используя яваскрипт функцию для боковой панели, которая должен отображаться подменю при нажатии на родительский элемент. Если я жестко закодировал боковую панель, все работает нормально.
Но что я действительно хочу - это динамическое построение этого меню с помощью углового JS '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 я жестко закодировал последний элемент боковой панели (примеры страниц), и он должен работать. В приведенной выше части нет.
Я знаю, что этот пример длится долго, но я не знал, как его уменьшить, что позволяет просто перестроить проблему.
В любом случае, я надеюсь, что кто-то может мне помочь.
С наилучшими пожеланиями Бен