Asked by:
tab select event gets fired when moving away from the page

Question
-
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?
Friday, February 27, 2015 12:19 AM
All replies
-
User1104055534 posted
I am checking this. You may need to submit a support case to Microsoft if this cannot be resolved here.
Tuesday, March 3, 2015 3:07 AM -
User1104055534 posted
Please debug your application and find when and how the event is triggered.
Sunday, March 8, 2015 10:57 PM