我正在构建一个员工目录，最近我改变了我的contentCtrl函数的工作方式，试图使Angular路由更加灵活。
旧代码
//the contentCtrl function is what drives the main body of the app, it uses the active id to pull the relevant JSON file from the file structure
//it then breaks that json file apart based on who is labled "primary", "seconday", and "tertiary" these teammates are placed into
//arrays labled based on thier position data field, we then use angular to populate the page
//so the manager of a program is in primary, so we use item in primary and item.fname etc to pull the program manager into the page
//we then use item in secondary to pull in the next person (assistant manager) and finally we use item in tertiary to
//pull in all of the teammates remaining in a department
$scope.contentCtrl = function(id) {
$scope.active = [];
$scope.activeTwo = [];
$scope.primary = [];
$scope.secondary = [];
$scope.tertiary = [];
$scope.credits = [];
$http.get('assets/json/' + id + '.json').then(function(response) {
$scope.active = response.data;
//loops through the json file and pulls out primary,secondary, and tertiary employees
for (var i = 0; i < $scope.active.length; i++) {
if ($scope.active[i].layout == "primary") {
$scope.primary.push($scope.active[i]);
} else if ($scope.active[i].layout == "secondary") {
$scope.secondary.push($scope.active[i]);
} else {
$scope.tertiary.push($scope.active[i]);
}
}
});
$http.get('assets/json/credits.json').then(function(response) {
$scope.activeTwo = response.data;
for (var i = 0; i < $scope.activeTwo.length; i++) {
$scope.credits.push($scope.activeTwo[i]);
}
});
};
新代码
$scope.contentCtrl = function(id) {
console.log(id);
$rootScope.activeID = id;
$rootScope.active = [];
$rootScope.activeTwo = [];
$rootScope.primary = [];
$rootScope.secondary = [];
$rootScope.tertiary = [];
$rootScope.credits = [];
$http.get('assets/json/' + $rootScope.activeID + '.json').then(function(response) {
$scope.active = response.data;
//loops through the json file and pulls out primary,secondary, and tertiary employees
for (var i = 0; i < $scope.active.length; i++) {
if ($scope.active[i].layout == "primary") {
$scope.primary.push($scope.active[i]);
} else if ($scope.active[i].layout == "secondary") {
$scope.secondary.push($scope.active[i]);
} else {
$scope.tertiary.push($scope.active[i]);
}
}
});
$http.get('assets/json/credits.json').then(function(response) {
$scope.activeTwo = response.data;
for (var i = 0; i < $scope.activeTwo.length; i++) {
$scope.credits.push($scope.activeTwo[i]);
}
});
};
以下是使用此功能显示员工的HTML
<!-- sets the primary teammate via a function located in the controller.js file please view that file for a description of HOW the function works, once the function is done however this ul places the teammate labeled primary into a position in the top left of the screen (determined by css, can be moved), the image, name, and position are all done through ng repeat and the image is an ng-click to pass the teammate in the image to the modal that pops up. So
1) page loads
2) controller splits json file into three arrays primary, secondary, and tertiary
3) we use angular to to pull from these arrays (item in primary)
4) item in primary for instance is Andy Johnson, so item.fname is Andy, item.lName is Johnson. These data fields are defined in the JSON file for each department
5) the image, when clicked, calls the function modalPass() and gives the parameter item, which in this instance is Andy Johnsons json data
6) the modalPass() function then saves whatever was passed in (item aka Andy Johnson) as an object called teammateInfo, hence on line 55 we use teammate Info.fName instead of item.fName -->
<ul class="primary">
<li ng-repeat="item in primary">
<a ng-click="modalPass(item)" data-toggle="modal" data-target="#teammateModal" /> <img class="directoryImg" ng-src={{item.image}}></a>
<h4>{{item.fName}} {{item.lName}}</h4>
<h4>{{item.pos}}</h4>
</li>
</ul>
<ul class="secondary">
<li style="width: 220px; margin-right:80px;" ng-repeat="item in secondary">
<a ng-click="modalPass(item)" data-toggle="modal" data-target="#teammateModal" /> <img class="directoryImg" ng-src={{item.image}}></a>
<h4>{{item.fName}} {{item.lName}}</h4>
<h4>{{item.pos}}</h4>
</li>
</ul>
<ul class="tertiary">
<li ng-class="sizeCheck(tertiary.length)" class="col-lg-1" ng-repeat="item in tertiary">
<div style="position: relative; left: 0; top: 0;">
<a ng-click="modalPass(item)" data-toggle="modal" data-target="#teammateModal" /> <img class="directoryImg" ng-src={{item.image}}>
<img ng-if="item.BOB != 'false'" class="BOB" src="./assets/images/icons/svg/BOB.svg">
<img ng-if="item.TCE != 'false'" class="TCE" src="./assets/images/icons/svg/TCE.svg"></a>
<img ng-if="item.GSC != 'false'" class="GSC" src="./assets/images/icons/svg/GSC.png"></a>
</div>
<h4 style="line-height:1;">{{item.fName}} {{item.lName}}<br>{{item.pos}}</h4>
</li>
</ul>
这使它工作但我几乎可以肯定这是一个糟糕的解决方案，我是Angular和Javascript的新手，但我知道你不应该使用全局变量，除非绝对需要，所以我愿意帮助那部分功能。但这不是我目前的问题。我遇到的问题是，当我放入一个控制台日志时，似乎是调用该函数3-4次。我没有错误，但它让我感到不舒服，因为我无法理解为什么它会这样做。任何人都可以解释这是否正常或帮助我找到解决方案，如果它是我的代码中的错误。