使用AngularJS更新多视图
我有多个模型，只有一个控制器。我的控制器处理对一个视图的更新。在这个视图中，我展示了三个部分，分别计算了玩过的游戏、排名和游戏结果。我只打了一个电话来发布游戏结果，我在数据库中得到了所有要正确更新的内容，但发布时更新的唯一视图是游戏结果。我被迫使用window.location.reload（）来刷新所有内容，但这似乎不是正确的方法。我已将调用标记为/////call to REFRESH///window.location.reload（） 非常感谢您的帮助 我的控制器使用AngularJS更新多视图,angularjs,Angularjs,我有多个模型，只有一个控制器。我的控制器处理对一个视图的更新。在这个视图中，我展示了三个部分，分别计算了玩过的游戏、排名和游戏结果。我只打了一个电话来发布游戏结果，我在数据库中得到了所有要正确更新的内容，但发布时更新的唯一视图是游戏结果。我被迫使用window.location.reload（）来刷新所有内容，但这似乎不是正确的方法。我已将调用标记为/////call to REFRESH///window.location.reload（） 非常感谢您的帮助 我的控制器 (function()
(function(){
angular.module('Dashboard',['Games'])
.controller('dashboardController', ['$http', 'GameService','TournamentService', 'Stats', 'ProgressGrid', function($http, GameService, TournamentService,Stats, ProgressGrid) {
var vm = this;
vm.isEditing = false;
vm.newGame = {
awayTeam: '',
homeTeam: '',
homeTeamScore: 0,
awayTeamScore: 0
};
vm.showModal = function() {
vm.isEditing = true;
}
vm.hideModal = function() {
vm.isEditing = false;
vm.addGameForm.$setPristine();
vm.isSaving = true;
}
vm.addGame = function() {
vm.isSaving = true;
vm.newGame.id = vm.games.length + 1;
// vm.newGame.gameDate = dateTransform(vm.newGame.gameDate);
// get team name for notification
vm.getTeamName = function(id) {
return vm.teams[id-1].teamName
}
GameService.save(vm.newGame, function() {
vm.addGameForm.$setPristine();
// set var for overtime
overtime = '';
if(vm.newGame.hadOT == true){
overtime = "(OT)";
}
if(vm.newGame.hadSO == true){
overtime = "(SO)";
}
vm.games = GameService.query();
vm.hideModal();
////////// CALL TO REFRESH /////////
window.location.reload();
})
}
var data = TournamentService.then(function(data) {
vm.tournament = data.tournament
vm.games = data.games;
vm.hipchatroom = vm.tournament.hipchatroom;
vm.hipchatkey = vm.tournament.hipchatkey;
vm.teams = vm.tournament.teams
vm.numberOfTeams = vm.teams.length;
vm.totalGames = ((vm.numberOfTeams -1) * 2) * vm.numberOfTeams
vm.percentGamesPlayed = (vm.games.length * 100) / vm.totalGames;
vm.progressGrid = ProgressGrid.init(vm.numberOfTeams);
Stats.calculateStandings(vm.games, vm.teams, vm.progressGrid);
});
vm.getTeamName = function(id) {
return vm.teams[id-1].teamName
}
}])
.factory('Stats', function() {
var calc = {
calculateStandings: function(games, teams, progressGrid) {
var homeTeam, awayTeam, gameResult, winner, loser, ot, standings;
_.each(games, function(game) {
homeTeam = teams[game.homeTeam-1];
awayTeam = teams[game.awayTeam-1];
gameResult = {};
winner = {};
loser = {}
ot = {};
standings = [];
ot.isOvertime = game.hadOT;
ot.isShootout = game.hadSO;
if( game.awayTeamScore > game.homeTeamScore ) {
winner.team = awayTeam;
winner.score = game.awayTeamScore;
loser.team = homeTeam;
loser.score = game.homeTeamScore;
} else if ( game.awayTeamScore < game.homeTeamScore ) {
winner.team = homeTeam;
winner.score = game.homeTeamScore;
loser.team = awayTeam;
loser.score = game.awayTeamScore;
}
// adds game to grid
calc.formattedResults(game, homeTeam.id, awayTeam.id, progressGrid)
// adds scores to team
calc.recordGameResults(winner, loser, ot)
// other stats
angular.forEach(teams, function (team, index) {
team.goalDifferential = team.goalsFor - team.goalsAgainst
team.gamesPlayed = team.wins + team.regulationLosses + team.overtimeShootoutLosses
team.regulationOvertimeWins = team.wins - team.shootoutWins
team.points = team.wins * 2 + team.overtimeShootoutLosses * 1 + team.regulationLosses * 0
});
})
},
recordGameResults: function(winner, loser, ot) {
if ( ot.isShootout || ot.isOvertime ) {
loser.team.overtimeShootoutLosses++
}
else {
loser.team.regulationLosses++
}
if ( ot.isShootout ) {
winner.team.shootoutWins++
loser.team.shootoutLosses++
}
winner.team.wins++
winner.team.goalsFor += winner.score
winner.team.goalsAgainst += loser.score
loser.team.goalsFor += loser.score
loser.team.goalsAgainst += winner.score
},
formattedResults: function(game, homeTeamID, awayTeamID, progressGrid) {
var formattedResult = game.awayTeamScore + "-" + game.homeTeamScore + " ";
formattedResult += game.hadSO ? '(SO)' : '' || game.hadOT ? '(OT)' : '';
progressGrid[homeTeamID - 1][awayTeamID - 1] = formattedResult;
return formattedResult
}
}
return calc;
})
.factory('ProgressGrid', function() {
var grid = {
init: function(numberOfTeams) {
var g = new Array(numberOfTeams)
for(var i = 0; i < numberOfTeams; i++) {
g[i] = new Array(numberOfTeams);
for(var j = 0; j < numberOfTeams; j++) {
g[i][j] = "";
}
}
return g;
}
}
return grid;
});
}());
<!-- Progress Grid -->
<h3 class="">Games Played: {{ ctrl.games.length }} of {{ctrl.totalGames}} <span class="text-muted">({{ ctrl.percentGamesPlayed | number : 0 }}%)</span></h3>
<div class="table-responsive">
<table class="table table-bordered" width="100%">
<tr>
<th ng-repeat="team in ctrl.teams">
{{team.teamName}}
</th>
<th> </th>
</tr>
<tr ng-repeat="teamAway in ctrl.teams">
<td ng-repeat="teamHome in ctrl.teams" ng-class="{bg: $index==$parent.$index}" width="177">
{{ ctrl.progressGrid[teamAway.id - 1][teamHome.id - 1] }}
<!-- <span class="text-danger">{{ teamAway.id - 1 }}, {{ teamHome.id - 1 }}</span> -->
</td>
<th>
@{{teamAway.teamName}}
</th>
</tr>
</table>
</div>
<!-- Team Standings -->
<h3>Standings</h3>
<div class="table-responsive">
<table class="table table-bordered" width="100%">
<thead>
<tr>
<th>Team Name</th>
<th>Players</th>
<th>GP</th>
<th>W</th>
<th>RL</th>
<th>OSL</th>
<th>PTS</th>
<th>SW</th>
<th>SL</th>
<th>ROW</th>
<th>GF</th>
<th>GA</th>
<th>GDIFF</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="team in ctrl.teams | orderBy: ['-points', 'gamesPlayed', '-regulationOvertimeWins','-goalDifferential']">
<td width="130">{{team.teamName}}</td>
<td>{{team.player1}}<br>{{team.player2}}</td>
<td class="statDetail">{{team.gamesPlayed}}</td>
<td class="statDetail">{{team.wins}}</td>
<td class="statDetail">{{team.regulationLosses}}</td>
<td class="statDetail">{{team.overtimeShootoutLosses}}</td>
<td class="statDetail">{{team.points}}</td>
<td class="statDetail">{{team.shootoutWins}}</td>
<td class="statDetail">{{team.shootoutLosses}}</td>
<td class="statDetail">{{team.regulationOvertimeWins}}</td>
<td class="statDetail">{{team.goalsFor}}</td>
<td class="statDetail">{{team.goalsAgainst}}</td>
<td class="statDetail">{{team.goalDifferential}}</td>
</tr>
</tbody>
</table>
</div>
<hr>
<h1>
Games
<button class="btn btn-primary btn-sm" ng-show="!ctrl.isEditing" ng-click="ctrl.showModal()">Add Game</button>
</h1>
<div class="table-responsive">
<table class="table">
<thead>
<th>Game #</th>
<th>Date</th>
<th>Final Score</th>
</thead>
<tbody>
<tr ng-repeat="game in ctrl.games | orderBy: '-id'">
<td>{{ game.id }}</td>
<td>{{ game.gameDate | date: medium }}</td>
<td>
<span ng-class="{ 'winner': game.awayTeamScore > game.homeTeamScore }">{{ ctrl.getTeamName(game.awayTeam) }}</span>
@
<span ng-class="{ 'winner': game.homeTeamScore > game.awayTeamScore }">{{ ctrl.getTeamName(game.homeTeam) }}</span>
<span>{{ game.awayTeamScore }} - {{game.homeTeamScore }}</span>
<span class="label label-warning" ng-show="game.hadOT && !game.hadSO">OT</span>
<span class="label label-danger" ng-show="game.hadSO">SO</span>
</td>
</tr>
<tr ng-show="ctrl.games.length < 1 "><td colspan="3">no games played at this time.</td></tr>
</tbody>
</table>
</div>
<div class="modal show" ng-show="ctrl.isEditing">
<div class="modal-dialog">
<form class="modal-content" name="ctrl.addGameForm" ng-submit="ctrl.addGame()">
<div class="modal-header">
<h2>Add Game</h2>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="form-group row">
<label for="date">Game Date</label>
<input type="date" class="form-control" name="gameDate" ng-model="ctrl.newGame.gameDate" required>
</div>
<div class="row">
<div class="col-sm-5 well">
<div class="form-group">
<label for="">Away Team</label>
<select name="awayTeam" class="form-control" ng-model="ctrl.newGame.awayTeam" required>
<option value=""></option>
<option ng-repeat="team in ctrl.teams" value="{{ team.id }}">{{ team.teamName }}</option>
</select>
</div>
<div class="form-group">
<label for="">Final Score</label>
<input type="number" name="awayTeamScore" class="form-control" ng-model="ctrl.newGame.awayTeamScore" required min="0"/>
</div>
</div>
<div class="col-sm-2 text-center">
@
</div>
<div class="col-sm-5 well">
<div class="form-group">
<label for="">Home Team</label>
<select name="homeTeam" class="form-control" ng-model="ctrl.newGame.homeTeam" required>
<option value=""></option>
<option ng-repeat="team in ctrl.teams" value="{{ team.id }}">{{ team.teamName }}</option>
</select>
</div>
<div class="form-group">
<label for="">Final Score</label>
<input type="number" name="homeTeamScore" class="form-control" ng-model="ctrl.newGame.homeTeamScore" required min="0" />
</div>
</div>
</div>
<div class="form-group">
<label class="checkbox">
<input type="checkbox" name="hadOT" ng-model="ctrl.newGame.hadOT" ng-click="ctrl.newGame.hadSO = false">
Overtime
</label>
<label class="checkbox">
<input type="checkbox" name="hadSO" ng-model="ctrl.newGame.hadSO" ng-click="ctrl.newGame.hadOT = false">
Shoot Out
</label>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-link" type="reset" data-dismiss="modal" ng-click="ctrl.hideModal()">Cancel</button>
<button class="btn btn-primary" type="submit" ng-disabled="(ctrl.newGame.homeTeam === ctrl.newGame.awayTeam) || (ctrl.newGame.homeTeamScore === ctrl.newGame.awayTeamScore) || ctrl.isSaving">Add Game</button>
</div>
</form>
</div>
</div>
玩的游戏：{{ctrl.Games.length}}{{ctrl.totalGames}}}（{{ctrl.percentGamesPlayed}数字：0}}%）
{{team.teamName}}
{{ctrl.progressGrid[teamAway.id-1][teamHome.id-1]}
@{{teamAway.teamName}
排名
队名
球员
全科医生
W
RL
奥斯陆
临时秘书处
西南
SL
一行
女朋友
GA
GDIFF
{{team.teamName}}
{{team.player1}}
{{team.player2}
{{team.gamesPlayed}
{{团队获胜}
{{team.regulationosses}}
{{球队超时失球}
{{team.points}
{{team.shootouthins}}
{{球队失球}
{{team.regulationVertimeWINS}
{{team.goalsFor}}
{{团队.目标对抗}
{{team.goalDifferential}
游戏
添加游戏
游戏#
日期
总分
{{game.id}
{{game.gameDate}日期：中等}
{{ctrl.getTeamName（game.awayTeam）}
@
{{ctrl.getTeamName（game.homeTeam）}
{{game.awayTeamScore}}-{{game.homeTeamScore}
OT
所以
现在没有比赛。
添加游戏
比赛日期
客队
{{team.teamName}
总分
@
主队
{{team.teamName}
总分
加班
射出
取消
添加游戏
TournamentService.service('TournamentService', ['$http','$q',function($http, $q) {
api = {
getTournament: function() {
return $http.get('/tournaments/2016B', {cache: true })
.then(function(tournament) { return tournament.data[0]})
}
getGames: function() {
return $http.get('/games')
.then(function(games){ return games.data })
}
}
return api
$q.all.controller('DashboardContoller', function(... TournamentService){
$q.all([TournamentService.getTournnament(), TournamentService.getGames()])
.then(function(rsps){
vm.tournament = rsps[0];
vm.games = rsps[1];
...
})
我倾向于以非常精细的方式考虑服务，这样您就可以让控制器选择他们请求数据的顺序。您的服务具有作为模型和API服务的双重目的。因为您将返回这些API调用的结果，所以它将被缓存为
TournamentService.service('TournamentService', ['$http','$q',function($http, $q) {
api = {
getTournament: function() {
return $http.get('/tournaments/2016B', {cache: true })
.then(function(tournament) { return tournament.data[0]})
}
getGames: function() {
return $http.get('/games')
.then(function(games){ return games.data })
}
}
return api
$q.all.controller('DashboardContoller', function(... TournamentService){
$q.all([TournamentService.getTournnament(), TournamentService.getGames()])
.then(function(rsps){
vm.tournament = rsps[0];
vm.games = rsps[1];
...
})
我倾向于以非常精细的方式考虑服务，这样您就可以让控制器选择他们请求数据的顺序。您可能需要再次调用锦标赛服务，因为调用控制器刷新是不够的（$route.reload（）不刷新服务）你有什么建议吗？你能发布你的锦标赛服务吗？它在那个控制器里没有…我看不出锦标赛服务在哪里。然后（函数（--->你可能需要再次调用锦标赛服务，因为调用控制器刷新它不够（$route.reload（）不刷新服务）你有什么建议吗？你能发布你的锦标赛服务吗？它在那个控制器里没有…我看不出锦标赛服务在哪里。然后（功能）（->data jusopi，谢谢你的建议。我收到了这个错误->TournamentService.GetTournName不是一个函数如果你可以在JSIDLE或plunker上使用它，我可能会帮你解决问题。我通常用Coffeescript编写代码，所以我的原始JS可能会有点不对劲。你的小提琴坏了。我不认为它加载的角度太高方法。如果你让它运行，模板应该正确呈现，而不是所有的{{}到处都是。问题是数据是动态的，并且来自mongodb集合。用静态信息重现所有这些需要花费我很长时间。这甚至不是因为angular没有正确初始化（例如，装订破损）。我试过“摆弄”它，没有双关语，但无法启动并运行它。数据不是问题，我们可以用最简单的形式模拟假数据来解决您遇到的错误。jusopi，谢谢您的建议。我收到了这个错误->TournamentService。GetTournName不是一个函数，如果您可以抛出它的话在JSFIDLE或plunker上，我可能会用f来解决问题