AngularJS终止了我的Javascript函数
由于缺乏JS经验,我不得不再次问你一个问题;) 我有一个使用javascript函数作为侧边栏的模板,当单击父项时,侧边栏应该显示一个子菜单。 如果我硬编码侧栏,一切正常 但我真正想要的是使用angularJS'ng repeat动态构建菜单。 当我尝试这个时,菜单不再折叠 下面是一个重新解释这个问题的示例(我希望没有因为重新构建示例而清理无关的代码而把问题搞砸):AngularJS终止了我的Javascript函数,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,由于缺乏JS经验,我不得不再次问你一个问题;) 我有一个使用javascript函数作为侧边栏的模板,当单击父项时,侧边栏应该显示一个子菜单。 如果我硬编码侧栏,一切正常 但我真正想要的是使用angularJS'ng repeat动态构建菜单。 当我尝试这个时,菜单不再折叠 下面是一个重新解释这个问题的示例(我希望没有因为重新构建示例而清理无关的代码而把问题搞砸): 首先,我们有以下文件结构: 资产 angularjs angular.min.js 自举 字体真棒 jquer
首先,我们有以下文件结构:
- angularjs
- angular.min.js
- 自举
- 字体真棒
- jquery
- jquery.js(v.1.10.2)
- js
- template.js
- index.html
- de-de.json
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>
{
"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 ();
});
var-App=函数(){
“严格使用”;
var chartColors=[“#e5412d”、“#f0ad4e”、“#444”、“#888”、“#555”、“#999”、“#bbb”、“#ccc”、“#eee”];
返回{init:init,chartColors:chartColors,debounce:debounce};
函数init(){
initLayout();
}
函数initLayout(){
$(“#站点徽标”).prependTo(“#包装器”);
$('html').removeClass('no-js');
Nav.init();
$('body').on('touchstart.dropdown','.dropdown menu',函数(e){
e、 停止传播();
});
}
函数解盎司(函数、等待、立即){
变量超时、参数、上下文、时间戳、结果;
返回函数(){
上下文=这个;
args=参数;
时间戳=新日期();
var later=function(){
var last=(new Date())-时间戳;
如果(最后一次<等待){
超时=设置超时(稍后,等待-最后一次);
}否则{
超时=空;
如果(!immediate)result=func.apply(上下文,参数);
}
};
var callNow=立即&&!超时;
如果(!超时){
超时=设置超时(稍后,等待);
}
如果(callNow)结果=函数应用(上下文,参数);
返回结果;
};
}
}();
var Nav=函数(){
返回{init:init};
函数init(){
var mainnav=$(“#main nav”),
openActive=mainnav.is('.open-active'),
navActive=mainnav.find('>.active');
mainnav.find('>.dropdown>a').bind('click',navClick);
如果(openActive&&navActive.is('.dropdown')){
navActive.addClass('opened').find('sub-nav').show();
}
}
功能导航点击(e){
e、 防止违约();
var li=$(this.parents('li');
如果(li.is('.opened'){
closeAll();
}否则{
closeAll();
li.addClass('opened').find('sub-nav').slideDown();
}
}
函数closeAll(){
$('.sub-nav').slideUp().parents('li').removeClass('opened');
}
}();
$(函数(){
App.init();
});
正如您所见,我已经硬编码了侧边栏的最后一项(示例页面),它应该可以工作。上面的部分没有 我知道这个例子非常长,但我不知道如何减少它,让你简单地重建问题 无论如何,我希望有人能帮助我 致意
Ben简单的回答是,初始化函数发生在angular构建DOM之前。您知道jQuery需要如何等待文档准备好做大多数事情吗?好吧,想象一下文档正在不断地变化。这就是角度。您的文档是100%动态的。您的
navclick
功能未绑定到ng repeat中的任何内容。。。因为ng repeat还没有创造任何东西
将angular添加到现有javascript应用程序中是相当棘手的。最简单的方法是删除现有的jQuery,然后在Angular中全部尝试。一开始这似乎让人望而生畏,但可能很简单!使用ng click替换navclick等