AngularJS $rootScope:infdig and ngRepeat:dupes
AngularJS $rootScope:infdig and ngRepeat:dupes
我已经放弃试图弄清楚这个问题，并搜索谷歌寻求帮助。据我所知，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";
});
不幸的是没有现场演示，这是公司代码，这是所有我被授权发布帮助，但是，如果你需要任何额外的信息，请问，因为我可能能够分享它。就像我说的，任何帮助都会非常感激。
我已经缩小了错误似乎发生在
- 美元范围。loadBranches = function(sectionName)
- {
- confService。getAllBranchLines("扩展", sectionName ),然后(函数(_branches)
- {
- scope.applyBranches美元(_branches);
- });
- }
但我可能是错的，如果我是正确的，我不知道如何解决它
**编辑:**现场演示http://107.170.154.154
您的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;
});
});
{{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>
相关文章：
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- 如何将ngrepeat下的ngmodel绑定到$scope
- Angular ngRepeat:重复错误(尽管没有重复的密钥）
- 如何按对象反转Angular ngRepeat的顺序's键，这些键是数字键
- 自动完成jquery;t使用ngmodel和ngrepeat(angular）
- 使用ngRepeat中的Angular动态更改元素颜色
- http://errors.angularjs.org/1.4.1/ngRepeat/dupes
- 我的指令在ngRepeat和ngInclude之前执行，尽管默认优先级为0
- Angular:如何使用ngRepeat并设置默认单选按钮选项
- ngRepeat中的动态ngModel对象属性
- 为什么有序不在angularjs的ngrepeat工作
- AngularJS:ngRepeat作用域在具有隔离作用域和ngTransclude的自定义指令中失败
- AngularJS数据绑定中断ngRepeat+奇怪行为
- 如何使用 angularjs 使用 ngrepeat 和 bootstrap ui 创建分页
- AngularJS ngRepeat:dupes
- ngRepeat:dupes 使用名为“name”的数组在中继器中复制键.用其他名称，它是工作
- Angular -使用$http获取数据时错误:[ngRepeat:dupes]
- 使用$routeParams undefined和ngRepeat:dupes错误
- AngularJS $rootScope:infdig and ngRepeat:dupes
- angular.js:13920错误:[ngRepeat:dupes]在中继器中重复
