我一直在这个网站上工作，我遇到了一些新的东西。我写了一系列指令用作组织的组件，我不能让他们进行通信就好了，他们会加载页面刷新或任何其他类型的刷新，但如果我切换视图我什么时候都没有显示返回带有指令的页面。
示例
我无法判断是否抛出了错误，或者是什么，但没有任何东西出现在我面前。以下是以下所有内容的代码：
deckbuilder.controller.js
angular.module('dbs').controller('deckbuilderController', DeckbuilderController);
DeckbuilderController.$inject = ['$scope', 'deckbuilderService', 'cardsService', '$http', '$location', 'loginService', 'loaderService', '$routeParams', 'chartsService', 'utilityService'];
function DeckbuilderController($scope, deckbuilderService, cardsService, $http, $location, loginService, loaderService, $routeParams, chartsService, utilityService){
$scope.submitDisabled = true;
$scope.deck;
$scope.tabView = 0;
$scope.deckColorChart = chartsService.getColorChart();
$scope.deckCurveChart = chartsService.getCurveChart();
$scope.deckComboChart = chartsService.getComboChart();
$scope.editing = false;
$scope.catalog = {
leaders: [],
cards: {}
};
$scope.colorView = 1;
$scope.searchView = 1;
$scope.updateTitle = function(){
deckbuilderService.setTitle($scope.deck.title);
};
$scope.updateNotes = function(){
deckbuilderService.setNotes($scope.deck.notes);
};
$scope.updatePrivate = function(){
deckbuilderService.setPrivate($scope.deck.is_private);
};
$scope.setSearchTab = function(tab){
$scope.searchView = tab;
};
$scope.getRowColor = function(color){
return utilityService.getTableRowColor(color);
}
$scope.private = [
{id: 0, name: "No"},
{id: 1, name: "Yes"}
];
// catch the leaderChanged event to update the view
// service is already updated at this point
$scope.$on("leaderChanged", function(event, data){
$('.leader-image').popover('hide');
$scope.deck = deckbuilderService.getDeck();
$scope.searchView = 2;
$scope.invalid = deckbuilderService.checkInvalid();
$scope.$apply();
});
$scope.$on("cardAdded", function(event, args){
$('.card-image').popover('hide');
$scope.deck = deckbuilderService.getDeck();
chartsService.setColorChartData($scope.deck.main_board.cards);
chartsService.setCurveChartData($scope.deck.main_board.cards);
chartsService.setComboChartData($scope.deck.main_board.cards);
$scope.deckColorChart = chartsService.getColorChart();
$scope.deckCurveChart = chartsService.getCurveChart();
$scope.deckComboChart = chartsService.getComboChart();
$scope.invalid = deckbuilderService.checkInvalid();
$scope.$apply();
});
$scope.$on('cardsFiltered', function(event, args){
$scope.catalog.cards = args.cards;
$scope.colorView = args.colorView;
$scope.$apply();
});
$scope.clearDeck = function(){
deckbuilderService.clearDeck();
$scope.deck = deckbuilderService.getDeck();
chartsService.setColorChartData($scope.deck.main_board.cards);
chartsService.setCurveChartData($scope.deck.main_board.cards);
chartsService.setComboChartData($scope.deck.main_board.cards);
$scope.deckColorChart = chartsService.getColorChart();
$scope.deckCurveChart = chartsService.getCurveChart();
$scope.deckComboChart = chartsService.getComboChart();
$scope.invalid = deckbuilderService.checkInvalid();
$scope.searchView = 1;
};
$scope.setTab = function(tab){
$scope.tabView = tab;
deckbuilderService.setMode(tab);
if(tab === 2){
$scope.deckColorChart = chartsService.getColorChart();
$scope.deckCurveChart = chartsService.getCurveChart();
$scope.deckComboChart = chartsService.getComboChart();
}
};
$scope.addCard = function(c){
deckbuilderService.addCard(c);
$scope.deck = deckbuilderService.getDeck();
chartsService.setColorChartData($scope.deck.main_board.cards);
chartsService.setCurveChartData($scope.deck.main_board.cards);
chartsService.setComboChartData($scope.deck.main_board.cards);
$scope.deckColorChart = chartsService.getColorChart();
$scope.deckCurveChart = chartsService.getCurveChart();
$scope.deckComboChart = chartsService.getComboChart();
$scope.invalid = deckbuilderService.checkInvalid();
}
$scope.removeCard = function(c){
deckbuilderService.removeCard(c);
$scope.deck = deckbuilderService.getDeck();
chartsService.setColorChartData($scope.deck.main_board.cards);
chartsService.setCurveChartData($scope.deck.main_board.cards);
chartsService.setComboChartData($scope.deck.main_board.cards);
$scope.deckColorChart = chartsService.getColorChart();
$scope.deckCurveChart = chartsService.getCurveChart();
$scope.deckComboChart = chartsService.getComboChart();
$scope.invalid = deckbuilderService.checkInvalid();
}
$scope.setColorTab = function(tab){
$scope.colorView = tab;
$scope.$broadcast('colorUpdated', {colorView: tab});
};
$scope.updateDeck = function(){
loaderService.show();
$scope.submitDisabled = true;
deckbuilderService.updateDeck().then(function(response){
loaderService.hide();
$location.path('/decklists/community/viewlist/'+$routeParams.id);
}).catch(function(err){
$scope.submitDisabled = false;
});
};
$scope.submitDeck = function(){
loaderService.show();
$scope.submitDisabled = true;
loginService.checkLogin().then(function(response){
if(response){
deckbuilderService.submitDeck().then(function(response){
loaderService.hide();
$location.path('/decklists/community/viewlist/'+response.decklist__id);
}).catch(function(err){
$scope.submitDisabled = false;
});
}else{
$scope.submitDisabled = false;
loaderService.hide();
localStorage.setItem('returnTo', 'deckbuilder');
$location.path('login');
}
});
};
loaderService.show();
$scope.deck = deckbuilderService.getDeck();
$scope.invalid = deckbuilderService.checkInvalid();
if($routeParams.id != void 0){
$scope.editing = true;
deckbuilderService.loadDeck($routeParams.id).then(function(response){
$scope.deck = deckbuilderService.getDeck();
chartsService.setColorChartData($scope.deck.main_board.cards);
chartsService.setCurveChartData($scope.deck.main_board.cards);
chartsService.setComboChartData($scope.deck.main_board.cards);
$scope.invalid = deckbuilderService.checkInvalid();
loaderService.hide();
});
}else{
$scope.invalid = deckbuilderService.checkInvalid();
loaderService.hide();
}
}
deckbuilderLeaderCatalog.directive.js
angular.module('dbs').directive('deckbuilderLeaderCatalog', DeckbuilderLeaderCatalogDirective);
DeckbuilderLeaderCatalogDirective.$inject = ['cardsService', 'loaderService'];
function DeckbuilderLeaderCatalogDirective(cardsService,loaderService){
return{
scope: {},
restrict: 'E',
transclude: true,
templateUrl: 'app/directives/deckbuilder/catalog/leader/deckbuilderLeaderCatalog.html',
link : function(scope, element, attrs){
scope.leaderColorView = 1;
scope.setLeaderColorTab = function(tab){
scope.leaderColorView = tab;
};
scope.catalog = {};
loaderService.show();
cardsService.load().then(function(response){
scope.catalog = response;
loaderService.hide();
});
}
};
}
deckbuilderLeader.directive.js
angular.module('dbs').directive('deckbuilderLeader', DeckbuilderLeaderDirective);
DeckbuilderLeaderDirective.$inject = ['deckbuilderService'];
function DeckbuilderLeaderDirective(deckbuilderService){
return{
scope: {
card : '='
},
restrict: 'E',
transclude: true,
templateUrl: 'app/directives/deckbuilder/leader/deckbuilderLeader.html',
link : function(scope, element, attrs){
scope.image = '/img/leaders/'+scope.card.img_front;
element.bind('click', function(){
deckbuilderService.leader.set(scope.card);
scope.$emit("leaderChanged");
});
// popover function
$('.leader-image').popover({
trigger: 'hover',
container: 'body',
html: true,
title: scope.card.card_name,
delay: {
"show" : 800
},
content: "<div class='row'>"+
"<div class='col-sm-12'>"+
"<table class='table table-sm'>"+
"<tr>"+
"<td>"+
"<img src='img/leaders/"+scope.card.img_front+"' width='50%' />"+
"</td>"+
"<td>"+
"<img src='img/leaders/"+scope.card.img_back+"' width='50%' />"+
"</td>"+
"</tr>"+
"</table>"+
"</div>"+
"</div>"+
"<div class='row'>"+
"<div class='col-sm-12'>"+
"<p>"+scope.card.card_front_text+"</p>"+
"<p><strong>Awakened</strong><br>"+scope.card.card_back_text+"</p>"+
"</div>"+
"</div>"
});
}
};
}
deckbuilderView.html
<view-header nav-active="decklists"></view-header>
<main class='container-fluid'>
<div class='row'>
<nav class='col-sm-12'>
<ol class='breadcrumb'>
<li class='breadcrumb-item'><a href="#">Home</a></li>
<li class='breadcrumb-item active'>Deck Builder</li>
</ol>
</nav>
</div>
<div class='row'>
<!-- maindeck/sidedeck tabs -->
<aside class='col-xs-12 col-sm-6 col-md-4 mb-3'>
<article class='card text-white bg-dark '>
<div class='card-header'>
Deck Info
</div>
<div class='card-body'>
<form class='mt-2 pb-2'>
<div class='col-xs-12 col-sm-12'>
<label>Deck Title</label>
<input type='text' class='form-control form-control-sm' name='deckTitle' ng-model='deck.title' ng-change="updateTitle()"/>
</div>
<div class='col-xs-12 col-sm-12'>
<label>Deck Notes (Optional)</label>
<textarea class='form-control form-control-sm deck-notes' name='deckNotes' ng-model='deck.notes' ng-change="updateNotes()"></textarea>
</div>
<div class='col-sm-6'>
<label>Is Private?</label>
<select name='isPrivate' id='isPrivate' class='form-control form-control-sm' ng-options="option.name for option in private track by option.id" ng-model="deck.is_private" ng-change="updatePrivate()"></select>
</div>
</form>
</div>
<div class="card-footer">
</div>
</article>
<div class='vertical-nav pt-2'>
<article class='card text-white bg-dark' ng-if="!cardStats && !leaderStats">
<div class='card-header ellipsis' ng-click='showLeaderStats(deck.leader.card)'>
<strong>Deck Leader |</strong> {{deck.leader.card_name}}
</div>
<div class='card-body'>
<div class='btn-group btn-group-sm d-none d-sm-flex'>
<button type='button' class='btn btn-danger' ng-if='deck.main_board.cards.length' ng-click='clearDeck()'>Clear Deck</button>
</div>
<div class='btn-group btn-group-sm d-none d-sm-flex'>
<button type='button' class='btn' ng-click='setTab(0)' ng-class="{'btn-primary' : tabView == 0 , 'btn-outline-primary' : tabView != 0}">
Main Deck | {{deck.main_board.qty}}
</button>
<button type='button' class='btn' ng-click='setTab(1)' ng-class="{'btn-primary' : tabView == 1 , 'btn-outline-primary' : tabView != 1}">
Side Deck | {{deck.side_board.qty}}
</button>
<button type='button' class='btn' ng-click='setTab(2)' ng-class="{'btn-primary' : tabView == 2 , 'btn-outline-primary' : tabView != 2}">
Deck Stats
</button>
</div>
<ul class='nav flex-column nav-pills d-block d-sm-none'>
<a class='nav-link active' ng-click="setTab(0)" ng-class='{active : tabView == 0}'>Main Deck <span class='badge badge-primary deck-count'>{{deck.main_qty}}</span></a>
<a class='nav-link' ng-click="setTab(1)" ng-class='{active : tabView == 1}'>Side Deck <span class='badge badge-primary deck-count'>{{deck.side_qty}}</span></a>
<a class='nav-link' ng-click="setTab(2)" ng-class='{active : tabView == 2}'>Deck Stats</a>
</ul>
</div>
<div ng-if="tabView == 0">
<table class='table decklist-table table-sm'>
<tr ng-repeat="m in deck.main_board.cards" ng-class="getRowColor(m.color)">
<td>{{m.qty}}</td>
<td ng-click="showCardStats(m)">{{m.card_name}}</td>
<td>
<div class='list-edit btn-group float-right'>
<button type='button' class='btn btn-primary btn-sm plus' ng-click="addCard(m)">+</button>
<button type='button' class='btn btn-secondary btn-sm minus ' ng-click="removeCard(m)">-</button>
</div>
</td>
</tr>
</table>
</div>
<div ng-if="tabView == 1">
<table class='table decklist-table table-sm'>
<tr ng-repeat="s in deck.side_board.cards" ng-class="getRowColor(s.color)">
<td>{{s.qty}}</td>
<td ng-click="showCardStats(s)">{{s.card_name}}</td>
<td>
<div class='list-edit btn-group float-right'>
<button type='button' class='btn btn-primary btn-sm plus' ng-click="addCard(s)">+</button>
<button type='button' class='btn btn-secondary btn-sm minus' ng-click="removeCard(s)">-</button>
</div>
</td>
</tr>
</table>
</div>
<div ng-if="tabView == 2">
<div google-chart chart="deckColorChart" style="height:250px; width:100%;color: white;background-color: black;"></div>
<div google-chart chart="deckCurveChart" style="height:250px; width:100%;color: white;background-color: black;"></div>
<div google-chart chart="deckComboChart" style="height:250px; width:100%;color: white;background-color: black;"></div>
</div>
<div class='card-footer p-0 m-0'>
<div class='btn-group btn-group-sm d-sm-flex d-flex'>
<button class='btn btn-success btn-block' ng-click="submitDeck()" ng-if="!editing" ng-disabled="invalid">Submit Deck</button>
<button class='btn btn-success btn-block' ng-click="updateDeck()" ng-if="editing" ng-disabled="invalid">Update Deck</button>
</div>
</div>
</div>
</article>
</aside>
<!-- deck preview -->
<section class='col-xs-12 col-sm-6 col-md-8'>
<article class='card bg-dark text-white'>
<div class='card-header p-0 w-0'>
<div class='btn-group btn-group-sm w-100'>
<button type='button' class='btn w-50' ng-click='setSearchTab(1)' ng-class="{'btn-primary': searchView == 1, 'btn-outline-primary': searchView != 1}">Choose Leader</button>
<button type='button' class='btn w-50' ng-click='setSearchTab(2)' ng-class="{'btn-primary': searchView == 2, 'btn-outline-primary': searchView != 2}">Build Deck</button>
</div>
</div>
<div class='card-body'>
<section ng-show="searchView == 1">
<deckbuilder-leader-catalog></deckbuilder-leader-catalog>
</section>
<section ng-show="searchView == 2">
<deckbuilder-filters catalog="catalog"></deckbuilder-filters>
<deckbuilder-card-catalog></deckbuilder-card-catalog>
</section>
</div>
</article>
</section>
</div>
</main>
<view-footer>
leaderCatalogView.html
<div class='btn-group btn-group-sm d-flex d-sm-flex mb-4'>
<button type='button' class='btn' ng-click='setLeaderColorTab(1)' ng-class="{'btn-danger' : leaderColorView == 1 , 'btn-outline-danger' : leaderColorView != 1}">Red</button>
<button type='button' class='btn' ng-click='setLeaderColorTab(2)' ng-class="{'btn-primary' : leaderColorView == 2 , 'btn-outline-primary' : leaderColorView != 2}">Blue</button>
<button type='button' class='btn' ng-click='setLeaderColorTab(3)' ng-class="{'btn-success' : leaderColorView == 3 , 'btn-outline-success' : leaderColorView != 3}">Green</button>
<button type='button' class='btn' ng-click='setLeaderColorTab(4)' ng-class="{'btn-warning' : leaderColorView == 4 , 'btn-outline-warning' : leaderColorView != 4}">Yellow</button>
<button type='button' class='btn' ng-click='setLeaderColorTab(5)' ng-class="{'btn-secondary' : leaderColorView == 5 , 'btn-outline-secondary' : leaderColorView != 5}">Black</button>
</div>
<div class='col'>
<div class='row'>
<div class='col-sm-6 col-md-4 col-lg-3 col-xl-2 mb-4' ng-repeat="l in leaders.red" ng-show="leaderColorView == 1">
<deckbuilder-leader card="l"></deckbuilder-leader>
</div>
<div class='col-sm-6 col-md-4 col-lg-3 col-xl-2 mb-4' ng-repeat="l in leaders.blue" ng-show="leaderColorView == 2">
<deckbuilder-leader card="l"></deckbuilder-leader>
</div>
<div class='col-sm-6 col-md-4 col-lg-3 col-xl-2 mb-4' ng-repeat="l in leaders.green" ng-show="leaderColorView == 3">
<deckbuilder-leader card="l"></deckbuilder-leader>
</div>
<div class='col-sm-6 col-md-4 col-lg-3 col-xl-2 mb-4' ng-repeat="l in leaders.yellow" ng-show="leaderColorView == 4">
<deckbuilder-leader card="l"></deckbuilder-leader>
</div>
<div class='col-sm-6 col-md-4 col-lg-3 col-xl-2 mb-4' ng-repeat="l in leaders.black" ng-show="leaderColorView == 5">
<deckbuilder-leader card="l"></deckbuilder-leader>
</div>
</div>
</div>
leader.html
<img src="{{image}}" width="100%" class='leader-image'/>
如果需要任何其他代码，请告诉我们。我想尽快解决这个问题，因为它确实会对网站的性能造成影响。