User-314657242 posted
I have an angularJs based app, and in one page there's a bootstrap tabbed view. The outer page is handled through a controller, and each tab has its own factory.
<section class="mainbar" data-ng-controller="addEditLocations as vm">
<section class="matter">
<div id="locationtitle"><h3>{{vm.locationTitle}} {{vm.locationSettings.basicSettings.location.locationName }}</h3></div>
<tabset>
<tab heading="Basic Settings" select="vm.basicSettingsTabSelect()">
<div data-ng-include="'app/managelocations/addeditlocations/basicsettings/basicsettings.html'"></div>
</tab>
<tab heading="Operating Hours" select="vm.opHoursTabSelect()">
<div ng-if="vm.locationSettings.opHours.isSelected" data-ng-include="'app/managelocations/addeditlocations/ophours/ophours.html'"></div>
</tab>
<tab heading="Holidays" select="vm.holidaysTabSelect()">
<div ng-if="vm.locationSettings.holidays.isSelected" data-ng-include="'app/managelocations/addeditlocations/holidays/holidays.html'"></div>
</tab>
<tab heading="Products & Services" select="vm.servicesTabSelect()">
<div ng-if="vm.locationSettings.services.isSelected" data-ng-include="'app/managelocations/addeditlocations/services/services.html'"></div>
</tab>
<tab heading="Message Templates" select="vm.messageTemplateTabSelect()">
<div ng-if="vm.locationSettings.messageTemplates.isSelected" data-ng-include="'app/managelocations/addeditlocations/messagetemplates/messagetemplates.html'"></div>
</tab>
</tabset>
</section>
</section>
Following is what I do inside the controller.
function addEditLocations($q, $route, $rootScope, $http, $location, common, globalConstants, systemcontext, clientcontext, loggedUser, security, localize, basicSettingsFactory, holidayFactory, opHoursFactory, serviceFactory) {
var vm = this;
vm.locationContext = $rootScope.appData.locationId;
vm.copyrightNotice = globalConstants.copyright;
vm.locationTitle = localize.getLocalizedString('_AddLocationTitle_');
vm.locationTitleName = 'New Location';
//tab instances
vm.locationSettings = {};
vm.locationSettings.basicSettings = {};
vm.locationSettings.holidays = {};
vm.locationSettings.opHours = {};
vm.locationSettings.services = {};
vm.locationSettings.messageTemplates = {};
//determine the configuration mode (add/edit)
vm.mode = 'Add';
if ($route.current.params.id !== undefined) {
vm.mode = 'Edit';
vm.locationTitle = localize.getLocalizedString('_EditLocationTitle_');
setTabActiveStatus(vm, true, true, true, true, true);
}
// *********************** page initialization ************************
initPage();
function initPage() {
// redirect to login page if user is invalid
//if (Object.keys(loggedUser.user).length === 0) {
// security.logout();
// return;
//}
activate();
bindEvents();
security.authenticate();
}
function activate() {
common.activateController([], controllerId).then(function () {
$rootScope.appData.isDisabled = true;
setTabActiveStatus(vm, false, false, false, false, false);
});
}
/*
Bind the tab events.
Initiate each factory when the relevant tab is selected.
*/
function bindEvents() {
setTabSelectedStatus(vm, false, false, false, false);
vm.basicSettingsTabSelect = function () {
loadLocationData();
};
vm.opHoursTabSelect = function () {
vm.locationSettings.opHours = opHoursFactory.init();
setTabSelectedStatus(vm, true, false, false, false);
}
vm.holidaysTabSelect = function () {
vm.locationSettings.holidays = holidayFactory.init();
setTabSelectedStatus(vm, false, true, false, false);
};
vm.servicesTabSelect = function () {
vm.locationSettings.services = serviceFactory.init();
setTabSelectedStatus(vm, false, false, true, false);
};
vm.messageTemplateTabSelect = function () {
setTabSelectedStatus(vm, false, false, false, true);
};
vm.locationSettings.cancelChanges = function () {
clientcontext.rejectChanges();
}
}
set the selected status for the tabs in the locations control
**/
function setTabSelectedStatus(vm, opHours, holidays, services, messageTemplates) {
vm.locationSettings.opHours.isSelected = opHours;
vm.locationSettings.holidays.isSelected = holidays;
vm.locationSettings.services.isSelected = services;
vm.locationSettings.messageTemplates.isSelected = messageTemplates;
}
function setTabActiveStatus(vm, opHours, holidays, services, messageTemplates) {
vm.locationSettings.opHours.isActive = opHours;
vm.locationSettings.holidays.isActive = holidays;
vm.locationSettings.services.isActive = services;
vm.locationSettings.messageTemplates.isActive = messageTemplates;
}
})();
My problem is the each of the factories related to the tabs get hit when I move away from the page. I.e. the tab selection events get fired.
Any idea why that happens and how to prevent it?
