Dina Blaszczak Dina Blaszczak - 2 months ago 10
AngularJS Question

Identical function using ng-show works to load one controller in Angular JS, but not the another one

I'm creating a page using Angular which has three controllers. They are loaded using ng-show directive. Each controller has a button with ng-click which calls a function. The function is simple it hides one controller and makes the next one visible.

The problem: this function works for one controller, but for some reason it doesn't work for the other one. Precisely, levelsView controller is loaded, but cardsView is not. CardsView becomes visible if I set ng-show to true in HTML page, but not through the function. I've spent a few days trying to find the problem and I can't, please help me to solve this "mystery".

HTML page:



<main>
<div class="bottom-container">
<div ng-controller="rulesCtrl as rulesView" ng-hide="rulesView.gameMetrics.levelsActive || rulesView.gameMetrics.cardsActive"
class="rules">
<p><span class="bold large-text">Rules: </span>Find a pair for the HTML opening and closing tag or match CSS value with a property within given time. <button class="link-button" data="#rulesHide">Read more...</button></p>
<div class="rules-details" id="rulesHide">
<p><span class="bold large-text">HTML: </span>For HTML a pair would be <span class="bold">&lt;div&gt; + &lt;/div&gt;</span>.</p>
<p><span class="bold large-text">CSS: </span>For CSS an example could be the property <span class="bold">display</span>. It has values: <span class="bold">block, inline, inline-block </span>etc. A pair would be <span class="bold">display + block.</span></p>
<p>The main challange is to find the pairs fast. The harder the level the shorter will be the time given.</p>
</div>
<button class="button btn-start" ng-click="rulesView.showLevels()">Start</button>
</div>

<div ng-controller="levelsCtrl as levelsView" ng-show="levelsView.gameMetrics.levelsActive" class="levels">
<h2>Select Level:</h2>
<button class="button btn-easy" ng-click="levelsView.showCards()">Easy</button>
<button class="button btn-medium">Medium</button>
<button class="button btn-hard">Hard</button>
</div>
<div ng-controller="cardsCtrl as cardsView" ng-show="cardsView.gameMetrics.cardsActive" class="game-field">
<h2>Find the tag pairs on time.</h2>
<span class="fa fa-clock-o fa-lg"></span>
<span class="game-timer">{{ cardsView.timeLeft }}</span>
<span class="game-timer-msg">{{ cardsView.timesUp }}</span>
<div class="flex-container">
<div class="flex-item"
ng-repeat="cardsData in cardsView.data">
{{ cardsData.text }}
</div>
</div>
</div>
</div>
</main>





Factory with data:



(function(){
angular
.module("syntaxPairing")
.factory("gameMetrics", GameMetrics);

GameMetrics.$inject = ["DataService"];

function GameMetrics(DataService){
var gameObject = {
rulesActive: true,
levelsActive: false,
cardsActive: false,
changeVisibility: changeVisibility
};

return gameObject;

function changeVisibility(metric, state){
if(metric === "rulesView"){
gameObject.rulesActive = state;
}else if(metric === "levelsView"){
gameObject.levelsActive = state;
}else if(metric === "cardsView"){
gameObject.cardsActive = state;
}
return false;
}

}
})();





First controller (rulesView.js):



(function(){
angular
.module("syntaxPairing")
.controller("rulesCtrl", RulesController);

RulesController.$inject = ["gameMetrics", "DataService"];

function RulesController(gameMetrics){

var vm = this;

vm.gameMetrics = gameMetrics;
vm.showLevels = showLevels;

function showLevels(){
gameMetrics.changeVisibility("rulesView", false);
gameMetrics.changeVisibility("levelsView", true);
}
}

})();





Second controller (levelsView.js):



(function(){
angular
.module("syntaxPairing")
.controller("levelsCtrl", LevelsController);

LevelsController.$inject = ["gameMetrics", "DataService"];

function LevelsController(gameMetrics){

var vm = this;

vm.gameMetrics = gameMetrics;
vm.showCards = showCards;

function showCards(){
gameMetrics.changeVisibility("levelsView", false);
gameMetrics.changeVisibility("rulesView", false);
gameMetrics.changeVisibility("cardsView", true);
}

}

})();





Third controller (cardsView.js):



(function(){
angular
.module("syntaxPairing")
.controller("cardsCtrl", CardsController);

CardsController.$inject = ["gameMetrics", "DataService", "$timeout"];

function CardsController(gameMetrics, DataService, $timeout){
var vm = this;

vm.data = DataService.cardsData;
vm.timeLeft = 5;
vm.onTimeout = onTimeout;


function onTimeout(){
vm.timeLeft--;
if(vm.timeLeft > 0){
mytimeout = $timeout(onTimeout, 1000);
}else{
vm.timesUp = "The time is up!";
}
}
var mytimeout = $timeout(onTimeout, 1000);

}

})();





DataService:



(function(){
angular
.module("syntaxPairing")
.factory("DataService", DataFactory);

function DataFactory(){
var dataObject = {
cardsData: cardsData
};
return dataObject;
}

var cardsData = [
{
type: "text",
text: "<html>",
selected: null,
correct: null
},
{
type: "text",
text: "</html>",
selected: null,
correct: null
},
{
type: "text",
text: "<header>",
selected: null,
correct: null
},
{
type: "text",
text: "</header>",
selected: null,
correct: null
},
{
type: "text",
text: "<body>",
selected: null,
correct: null
},
{
type: "text",
text: "</body>",
selected: null,
correct: null
},
{
type: "text",
text: "<p>",
selected: null,
correct: null
},
{
type: "text",
text: "</p>",
selected: null,
correct: null
},
{
type: "text",
text: "<script>",
selected: null,
correct: null
},
{
type: "text",
text: "</script>",
selected: null,
correct: null
},
{
type: "text",
text: "<span>",
selected: null,
correct: null
},
{
type: "text",
text: "</span>",
selected: null,
correct: null
}
]

})();




Answer

In third controller i.e. cardsCtrl, you are missing gameMetrics. So cardsView.gameMetrics.cardsActive is not changed.

Just add the below line, it works perfectly.

vm.gameMetrics = gameMetrics; 

http://jsbin.com/zeredah/edit?html,js,output

Comments