我已经放弃了试图解决这个问题并且已经向Google寻求帮助。从我收集到的角度来看,AngularJs在变量和函数上有一些神奇的作用。我已经读过,尽管你在Javascript中正常编程,但是AngularJS对于函数非常挑剔,而且一个小小的错误会导致你的程序崩溃,或者浏览器可能会出现无限循环的错误。关于函数及其处理数据的方式会导致创建一个新对象,该对象与AngularJS的魔术后端的旧数据副本或类似的东西不匹配。
我尝试做的事情我真的需要AngularJS,而我想要做的就是通过ajax获取项目列表,将其插入列表,然后在每个列表项目中插入一秒钟通过ajax抓取的项目的子列表,根据其插入的项目而不同。我现在已经尝试了4天才能让它发挥作用。
我已经重写了声明所有函数本身的方式,声明了所有变量,以及函数和变量处理所有数据的方式几十倍。
非常感谢任何帮助。
这是HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" ng-app='app'> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" ng-app='app'> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" ng-app='app'> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" ng-app='app'> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="client_components/custom_component/css/bootstrap.min.css">
<link rel="stylesheet" href="client_components/custom_component/css/ui-lightness/jquery-ui-1.10.4.min.css">
<link rel="stylesheet" href="client_components/custom_component/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="client_components/custom_component/css/main.css">
</head>
<body ng-controller="MasterCtrl">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container">
<div class="row">
<div class="col-xs-3" ng-controller="NavCtrl">
<div class="panel panel-default">
<div class="panel-body">
{{msg}}
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<ul class="list-group section-list" id="list">
<li class="list-group-item" ng-repeat="section in sections" ng-controller="SectionCtrl">
{{section.sectionName}}
{{loadBranches(section.sectionName)}}
<ul class="list-group branch-list">
<li class="list-group-item list-group-item-info" ng-repeat="branch in branches" ng-controller="BranchCtrl">
{{branch.rawLine}}
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-body">
Unused
</div>
</div>
</div>
</div>
</div>
<!-- Javascript Dependencies -->
<!-- Modernizr and its Respond -->
<script src="client_components/custom_component/js/vendor/modernizr-2.7.2.js" defer></script>
<script src="client_components/custom_component/js/vendor/respond.js" defer></script>
<!-- jQuery suite -->
<script src="client_components/custom_component/js/vendor/jquery-1.11.0.min.js" defer></script>
<script src="client_components/custom_component/js/vendor/jcanvas.js" defer></script>
<script src="client_components/custom_component/js/vendor/jquery-ui-1.10.4.min.js" defer></script>
<!-- Bootstrap and Angular -->
<script src="client_components/custom_component/js/vendor/bootstrap.min.js" defer></script>
<script src="client_components/custom_component/js/vendor/angular.min.js" defer></script>
<!-- Custom -->
<script src="client_components/custom_component/js/main.js" defer></script>
</body>
</html>
继承Javascript代码
"use strict";
var appModule = angular.module('app', []);
appModule.service("confService", function($http, $q)
{
// Expose Public API
return({
moveLine: moveLine,
getAllLines: getAllLines,
getAllLinesGroupedObj: getAllLinesGroupedObj,
getAllLinesGroupedArr: getAllLinesGroupedArr,
createSection: createSection,
deleteSection: deleteSection,
moveSection: moveSection,
getAllSectionLines: getAllSectionLines,
createBranch: createBranch,
deleteBranch: deleteBranch,
moveBranch: moveBranch,
getAllBranchLines: getAllBranchLines
});
// ----
// PUBLIC
// ----
function moveLine(config, from, to)
{
var request = $http({
method: "post",
url: "server_components/custom_component/ajax/changeLineOrder.php",
data:
{
config: config,
from: from,
to: to
}
});
return(request.then(handleSuccess, handleError));
};
function moveSection(config, from, to)
{
var request = $http({
method: "post",
url: "server_components/custom_component/ajax/changeSectionOrder.php",
data:
{
config: config,
from: from,
to: to
}
});
return(request.then(handleSuccess, handleError));
};
function moveBranch(config, section, from, to)
{
var request = $http({
method: "post",
url: "server_components/custom_component/ajax/changeBranchOrder.php",
data:
{
config: config,
section: section,
from: from,
to: to
}
});
return(request.then(handleSuccess, handleError));
};
function getAllLines(config)
{
var request = $http({
method: "post",
url: "server_components/custom_component/ajax/getAll.php",
data:
{
config: config
}
});
return(request.then(handleSuccess, handleError));
};
function getAllLinesGroupedObj(config)
{
var request = $http({
method: "post",
url: "server_components/custom_component/ajax/getAll2.php",
data:
{
config: config
}
});
return(request.then(handleSuccess, handleError));
};
function getAllLinesGroupedArr(config)
{
var request = $http({
method: "post",
url: "server_components/custom_component/ajax/getAll2Arr.php",
data:
{
config: config
}
});
return(request.then(handleSuccess, handleError));
};
function getAllBranchLines(config, section)
{
var request = $http({
method: "post",
url: "server_components/custom_component/ajax/getAllBranches.php",
data:
{
config: config,
section: section
}
});
return(request.then(handleSuccess, handleError));
};
function getAllSectionLines(config)
{
var request = $http({
method: "post",
url: "server_components/custom_component/ajax/getAllSections.php",
data:
{
config: config
}
});
return(request.then(handleSuccess, handleError));
};
function deleteSection(config, section)
{
var request = $http({
method: "post",
url: "server_components/custom_component/ajax/removeSection.php",
data:
{
config: config,
it: section
}
});
return(request.then(handleSuccess, handleError));
};
function createSection(config, section)
{
var request = $http({
method: "post",
url: "server_components/custom_component/ajax/createSection.php",
data:
{
config: config,
it: section
}
});
return(request.then(handleSuccess, handleError));
};
function deleteBranch(config, section, branch)
{
var request = $http({
method: "post",
url: "server_components/custom_component/ajax/removeBranch.php",
data:
{
config: config,
section: section,
it: branch
}
});
return(request.then(handleSuccess, handleError));
};
function createBranch(config, section, branch)
{
var request = $http({
method: "post",
url: "server_components/custom_component/ajax/createBranch.php",
data:
{
config: config,
section: section,
it: branch
}
});
return(request.then(handleSuccess, handleError));
};
// ----
// PRIVATE
// ----
function handleError(response)
{
if(
!angular.isObject(response.data) ||
!response.data.message
)
{
return($q.reject(response.data.message));
}
return(response.data);
};
function handleSuccess(response)
{
return(response.data);
};
});
appModule.controller('MasterCtrl', function($scope, confService)
{
$scope.sections = [];
loadSections();
// ----
// PRIVATE
// ----
function loadSections()
{
confService.getAllSectionLines().then(function(_sections)
{
applySections(_sections);
});
};
function applySections(_sections)
{
$scope.sections = _sections;
};
});
appModule.controller('SectionCtrl', function($scope, confService)
{
$scope.branches = [];
$scope.loadBranches = function(sectionName)
{
confService.getAllBranchLines("extensions", sectionName).then(function(_branches)
{
$scope.applyBranches(_branches);
});
}
$scope.applyBranches = function(_branches)
{
$scope.branches = _branches;
}
});
appModule.controller('BranchCtrl', function($scope)
{
});
appModule.controller('NavCtrl', function($scope)
{
$scope.msg = "Construction";
});
不幸的是没有现场演示,这是公司代码,这是我被授权发布的所有帮助,但是如果您需要任何其他信息,请询问我可以分享它。就像我说的任何帮助都会非常感激。
我已经缩小了
中似乎发生的错误但我可能是错的,如果我是对的,我无法弄清楚如何解决它
**编辑:**现场演示http://107.170.154.154
答案 0 :(得分:1)
您的ng-repeat
依赖于范围函数,该函数每次运行时都会返回一个新数组。即使返回值在内部每次都是等效的,它仍然是一个不同的对象(即函数不是幂等的)。这会导致另一个$ digest循环运行,返回另一个值,导致它再次运行,依此类推。如果不加以控制,它会永远持续下去。这就是您看到错误的原因。
您的代码的这一行是您的问题:
{{loadBranches(section.sectionName)}}
......与随附的控制器代码一起使用。
解决方案是初始化$scope.branches
:
<强> SectionCtrl:强>
appModule.controller('SectionCtrl', function($scope, confService) {
confService.getAllBranchLines("extensions", $scope.section.sectionName).then(function(_branches)
{
$scope.branches = _branches;
});
});
<强> HTML:强>
{{section.sectionName}}
<ul class="list-group branch-list">
<li class="list-group-item list-group-item-info" ng-repeat="branch in branches"
ng-controller="BranchCtrl">
{{branch.rawLine}}
</li>
</ul>