I have code that I inherited that contains HTML and Angular. The footer of
a page needs to show or hide buttons based on the current controller being
used. The HTML is as follows:
(*NOTE*: I also cannot figure out what the previous developer had in mind
with the expression that I have made italic, such as in: ng-show="
*!!buttons.exit*")
<footer class="main-container" ng-app="">
<section class="actions" ng-class="buttons.actionsClass">
<button ng-show="*!!buttons.exit*" id="{{buttons.exit.id}}"
class="exit-button">Exit App<span>™</span></button>
<div ng-show="*!!buttons.back*"
ng-class="{'button-with-description': buttons.back.description}">
<button id="{{buttons.back.id}}"
ng-click="buttons.back.action()">
{{buttons.back.text ? buttons.back.text : "Back"}}
</button>
<p ng-show="*!!buttons.back*" class="button-description">←
{{buttons.back.description}}</p>
</div>
<div ng-show="*!!buttons.next*"
ng-class="{'button-with-description': buttons.next.description}">
<button id="{{buttons.next.id}}"
ng-click="buttons.next.action()">
{{buttons.next.text ? buttons.next.text : "Next"}}
</button>
<p ng-show="*!!buttons.next*"
class="button-description">{{buttons.next.description}} →</p>
</div>
</section>
</footer>
The state and controller are defined in the following Angular code:
angular.module("MyApp.screens.decisionss", [])
.config(function($stateProvider) {
var header = { templateUrl:
"client/app/screens/shared/header.html?v=" + APP_VERSION },
footer = { templateUrl:
"client/app/screens/shared/footer.html?v=" + APP_VERSION };
$stateProvider.state("problemSolver",
{
abstract: true,
url: "/problem-solver",
views: {
"header": header,
"footer": footer
}
})
.state("problemSolver.overview",
{
url: "/overview",
views: {
"content@": {
templateUrl:
"client/app/screens/problemSolver/overview.html?v=" + APP_VERSION,
controller: "OverviewController"
}
}
})
.state("problemSolver.question",
{
url: "/question",
views: {
"content@": {
templateUrl:
"client/app/screens/problemSolver/question.html?v=" + APP_VERSION,
controller: "ProblemSolverQuestionController"
}
}
})
.state("problemSolver.resolved",
{
url: "/resolved",
views: {
"content@": {
templateUrl:
"client/app/screens/problemSolver/resolved.html?v=" + APP_VERSION,
controller: "ResolvedController"
}
}
})
.state("problemSolver.unresolved",
{
url: "/unresolved",
views: {
"content@": {
templateUrl:
"client/app/screens/problemSolver/unresolved.html?v=" + APP_VERSION,
controller: "UnresolvedController"
}
}
});
})
.controller("OverviewController",
[
"$scope", "$state", "$rootScope", "selectionsSvc",
function($scope, $state, $rootScope, selectionsSvc) {
$rootScope.screenTitle = "ExampleProblem Solver";
var backButtonDescription = "To Main Menu";
$rootScope.buttons = {
back: selectionsSvc.getButton(false, backButtonDescription,
"home"),
next: selectionsSvc.getButton(false, "",
"problemSolver.question")
};
}
])
.controller("ProblemSolverQuestionController",
[
"$scope", "$state", "$rootScope", "selectionsSvc",
function ($scope, $state, $rootScope, selectionsSvc) {
$rootScope.screenTitle = "Example Problem Solver";
//todo: actually implement
var answers = dummyGetAnswers();
$scope.answers = [answers[0], answers[1]];
$scope.question = dummyGetQuestion().question;
$scope.showMoreProblemsButton = true;
var backButtonDescription = "To Main Menu";
$rootScope.buttons = {
back: selectionsSvc.getButton(false, backButtonDescription,
"home"),
next: selectionsSvc.getButton(false, "",
"problemSolver.resolved")
};
}
])
.controller("ResolvedController",
[
"$scope", "$state", "$rootScope", "selectionsSvc",
function ($scope, $state, $rootScope, selectionsSvc) {
$rootScope.screenTitle = "Example Problem Solver";
//todo: actually implement
$scope.resolvedImage =
"https://media.makeameme.org/created/Hooray.jpg";;
var nextButtonDescription = "To Main Menu";
$rootScope.buttons = {
actionsClass: "flex-end",
next: selectionsSvc.getButton(false, nextButtonDescription,
"home")
};
}
])
.controller("UnresolvedController",
[
"$scope", "$state", "$rootScope", "selectionsSvc",
function ($scope, $state, $rootScope, selectionsSvc) {
$rootScope.screenTitle = "Example Problem Solver";
//todo: actually implement
$scope.providerPhoneNumber = "555-555-1234";
$scope.unresolvedImage = ErrorImage.jpg";
var nextButtonDescription = "To Main Menu";
$rootScope.buttons = {
actionsClass: "flex-end",
next: selectionsSvc.getButton(false, nextButtonDescription,
"home")
};
}
]);
And, lastly, there is Angular code to register and keep track of various
buttons, as follows.
(*NOTE*: The getButton function does nothing, and I believe that the
problem is with this.)
angular.module("MyApp.global.services.selections", ["MyApp.global"])
.service("selectionsSvc", ["$state", "$rootScope", "$window",
function ($state, $rootScope, $window) {
// NOTE: the "selectionsSvc" handles registering selections
that are used for casting.
//TODO: potentially rename these internal variables and methods
to match the "selectionsSvc". Right now it is not important enough to worry
about
var buttonMatrix = [];
var selectedIndex = 0;
var selectedOption;
var nextButton;
var buttonId = 0;
var registeredButtons = {};
var buttonTypes = {
video: "video",
dailyDiary: "dailyDiary",
myProgress: "myProgress",
problemSolver: "problemSolver",
contactAudiologist: "contactAudiologist"
};
function go(location) {
return function () { $state.go(location); }
}
function getSelection(text, description, action, name) {
var id = "Selection-" + buttonId;
var selection = {};
selection["id"] = id;
if (text) selection["text"] = text;
if (description) selection["description"] = description;
if (action) {
selection["action"] = action;
if (typeof action !== "function") selection["action"] =
go(action);
}
if (name) { selection["name"] = name; }
buttonId++;
return selection;
}
function getMenuButton(type, text, action) {
var button = getSelection(text, "", action);
var iconClass = false;
switch (type) {
case buttonTypes.video: iconClass = "icon-Video"; break;
case buttonTypes.dailyDiary: iconClass =
"icon-DailyDiary"; break;
case buttonTypes.myProgress: iconClass =
"icon-MyProgress"; break;
case buttonTypes.problemSolver: iconClass =
"icon-ProblemSolver"; break;
case buttonTypes.contactAudiologist: iconClass =
"icon-ContactAudiologist"; break;
}
if (iconClass) button["iconClass"] = iconClass;
return button;
}
function getLocation(button) {
if (!button) return;
var location = button.id.split("-").slice(1)[0];
return parseInt(location);
}
function processButton(button) {
var location = getLocation(button);
buttonMatrix[location] = button;
}
function reInitialize() {
buttonMatrix = [];
selectedIndex = 0;
selectedOption = false;
nextButton = false;
buttonId = 0;
registeredButtons = {};
$rootScope.buttons = registeredButtons;
$window.mmmq.push(["RegisteredSelectionsCleared"]);
}
function loadButtons() {
var buttons = registeredButtons;
// the purpose of this is to populate the buttonMatrix
based on the id of the given button
if (buttons.options) {
for (let key of Object.keys(buttons.options)) {
buttons.options[key].isOption = true;
processButton(buttons.options[key]);
}
}
if (buttons.next) {
processButton(buttons.next);
nextButton = buttons.next;
// if there are no options then make sure the next
button is selected by default
if (!buttons.options || buttons.options.length === 0)
selectedIndex = getLocation(nextButton);
}
if (buttons.exit) processButton(buttons.exit);
if (buttons.back) processButton(buttons.back);
}
function moveUp() {
var newRow = selectedIndex - 1;
if (newRow >= 0) selectedIndex = newRow;
var selection = buttonMatrix[selectedIndex];
if (selection.isOption) selectedOption = selection;
return selection;
}
function moveDown() {
var newRow = selectedIndex + 1;
if (newRow < buttonMatrix.length) selectedIndex = newRow;
var selection = buttonMatrix[selectedIndex];
if (selection.isOption) selectedOption = selection;
return selection;
}
function processSelectedAction() {
var selection = selectedItem();
// do not process the option if the button pressed was the
back button
var isNextButton = getLocation(selection) ===
getLocation(nextButton);
var option = getSelectedOption();
if (isNextButton && option &&
option.hasOwnProperty("action")) {
option.action();
}
else if(selection && selection.hasOwnProperty("action")){
selection.action();
}
}
function pressEnter() {
var selection = selectedItem();
if (selection.isOption) {
selectedIndex = getLocation(nextButton);
return {performingAction: false};
}
processSelectedAction();
return {performingAction: true};
}
function selectedItem() { return buttonMatrix[selectedIndex]; }
function getSelectedOption() {
if (selectedOption) return selectedOption;
var potentialOption = _.find(buttonMatrix, "isOption");
if (potentialOption) selectedOption = potentialOption;
return selectedOption;
}
function selectedIds() {
var selectedIds = {};
selectedIds.selectedId = selectedItem().id;
var option = getSelectedOption();
if (option) selectedIds.selectedOptionId = option.id;
return selectedIds;
}
function registerButtonsClass(className) {
registeredButtons.actionsClass = className;
}
function register(button, type) {
if (!registeredButtons.options) registeredButtons.options =
[];
if (type === "option") {
registeredButtons.options.push(button);
}
else if (type === "exit") {
registeredButtons.exit = button;
}
else if (type === "next") {
registeredButtons.next = button;
}
else if (type === "back") {
registeredButtons.back = button;
}
$rootScope.buttons = registeredButtons;
}
function registerNextButton(description, action) {
var button = getSelection(false, description, action);
register(button, "next");
}
function registerBackButton(description, action) {
var button = getSelection(false, description, action);
register(button, "back");
}
function registerExitButton(action) {
var button = getSelection(false, false, action);
register(button, "exit");
}
function registerOption(text, description, action) {
var button = getSelection(text, description, action);
register(button, "option");
}
function registerNamedOption(name, text, description, action) {
var button = getSelection(text, description, action, name);
register(button, "option");
}
function registerMenuButton(type, text, action) {
var button = getMenuButton(type, text, action);
register(button, "option");
}
function registerInputAsSelection(action) {
var selection = getSelection(false, false, action);
selection.isInput = true;
register(selection, "option");
$window.mmmq.push(["RegisteredInput", { inputId:
selection.id }]);
return selection.id;
}
function getRegisteredButtons() {
return registeredButtons;
}
*function getButton(showHide, label, state) {*
* $rootScope.showButton = true;*
* return true;*
* }*
$rootScope.$on("$stateChangeStart", function () {
reInitialize();
});
/*window['mmmq'].push(["Screen", function(template){
loadButtons(template.buttons);
}]);*/
return {
loadButtons: loadButtons,
selectedItem: selectedItem,
selectedOption: selectedOption,
selectedIds: selectedIds,
moveUp: moveUp,
moveDown: moveDown,
pressEnter: pressEnter,
registerOption: registerOption,
registerNamedOption: registerNamedOption,
registerNextButton: registerNextButton,
registerBackButton: registerBackButton,
registerExitButton: registerExitButton,
registerMenuButton: registerMenuButton,
types: buttonTypes,
getRegisteredButtons: getRegisteredButtons,
registerButtonsClass: registerButtonsClass,
registerInputAsSelection: registerInputAsSelection,
reInitialize: reInitialize
};
}]
);
Kindly help out someone who is new to Angular but quite knowledgeable about
OOD and other languages/frameworks.
Thanks
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
![https://media.makeameme.org/created/Hooray.jpg"](https://media.makeameme.org/created/Hooray.jpg"){kind=link}