I'm trying to use $location.path() inside of an $interval to automatically navigate from tab to tab on a timer.
However, whenever I call $location.path(x) it only reloads my current view.
My code is as follows:
tabsController.js
(function () {
var injectParams = ['$location', '$routeParams', '$scope', '$rootScope', '$interval', 'teleAiDiagnosticsConfig'];
var TabsController = function ($location, $routeParams, $scope, $rootScope, $interval, teleAiDiagnosticsConfig) {
var vm = this;
$rootScope.autoNavInterval = {};
$rootScope.AutoNavActive = false;
$scope.tabs = [
{ link: '#!/vehicles', label: 'Vehicles', active: (($location.$$url.indexOf('/vehicle') !== -1) ? true : false) },
{ link: '#!/workzones', label: 'Workzones', active: (($location.$$url.indexOf('/workzone') !== -1) ? true : false) },
{ link: '#!/operatorStations', label: 'Operator Stations', active: (($location.$$url.indexOf('/operatorStation') !== -1) ? true : false) },
{ link: '#!/sessionStatus/123', label: 'Session Status (123)', active: (($location.$$url.indexOf('/sessionStatus') !== -1) ? true : false) }
];
// find the tab that should be marked as active
for (var i = 0; i < $scope.tabs.length; i++) {
if ($scope.tabs[i].active == true) {
$scope.selectedTab = $scope.tabs[i];
break;
}
}
if ($scope.selectedTab == undefined)
$scope.selectedTab = $scope.tabs[0];
$scope.setSelectedTab = function (tab) {
$scope.selectedTab = tab;
}
$scope.tabClass = function (tab) {
if ($scope.selectedTab == tab) {
return "active";
} else {
return "";
}
}
$scope.nextTab = function () {
for (var i = 0; i < $scope.tabs.length; i++) {
if ($scope.tabs[i] == $scope.selectedTab) {
if (i == $scope.tabs.length - 1) {
$location.path($scope.tabs[0].link);
if (!$scope.$$phase) $scope.$apply()
$scope.tabs[0].active = true;
$scope.selectedTab = $scope.tabs[0];
break;
}
else {
$location.path($scope.tabs[i + 1].link);
if (!$scope.$$phase) $scope.$apply()
$scope.tabs[i + 1].active = true;
$scope.selectedTab = $scope.tabs[i + 1];
break;
}
}
}
}
$scope.startAutoNav = function () {
$rootScope.AutoNavActive = true;
$rootScope.autoNavInterval = $interval(function () {
$scope.nextTab();
}, teleAiDiagnosticsConfig.autoNavTimer);
}
$scope.stopAutoNav = function () {
$rootScope.AutoNavActive = false;
$interval.cancel($rootScope.autoNavInterval);
}
$scope.startAutoNav();
};
TabsController.$inject = injectParams;
angular.module('teleAiDiagnostics').controller('TabsController', TabsController);
}());
Yes, yes, I know using $rootScope is not advised. I'm going to change it once I get $location.path() working.
I've tried it with and without the if (!$scope.$$phase) $scope.$apply() lines. I've also tried adding a call to $location.replace() but this doesn't do anything for me.
Whenever $location.path() is called the view section flashes but it just reloads the Vehicles view.
app.js
(function () {
var app = angular.module('teleAiDiagnostics', ['ngRoute', 'ngAnimate', 'ui.bootstrap']);
app.config(['$routeProvider', function ($routeProvider) {
var viewBase = 'app/views/';
$routeProvider
.when('/vehicles', {
controller: 'VehiclesController',
templateUrl: viewBase + 'vehicles.html',
controllerAs: 'vm'
})
.when('/vehicle/:id', {
controller: 'VehicleController',
templateUrl: viewBase + "vehicle.html",
controllerAs: 'vm'
})
.when('/workzones', {
controller: 'WorkzonesController',
templateUrl: viewBase + 'workzones.html',
controllerAs: 'vm'
})
.when('/workzone/:id', {
controller: 'WorkzoneController',
templateUrl: viewBase + "workzone.html",
controllerAs: 'vm'
})
.when('/operatorStations', {
controller: 'OperatorStationsController',
templateUrl: viewBase + 'operatorStations.html',
controllerAs: 'vm'
})
.when('/operatorStation/:id', {
controller: 'OperatorStationController',
templateUrl: viewBase + 'operatorStation.html',
controllerAs: 'vm'
})
.when('/sessionStatus/:id', {
controller: 'SessionStatusController',
templateUrl: viewBase + 'sessionStatus.html',
controllerAs: 'vm'
})
.otherwise({ redirectTo: '/vehicles' });
}]);
// Intialize slider
$('.flexslider').flexslider({
animation: 'slide',
slideshow: true,
pauseOnAction: true,
controlNav: true,
pauseOnHover: true,
touch: true,
directionalNav: false,
direction: 'horizontal',
slideshowSpeed: 6000,
smoothHeight: true
});
}());
Not sure why this isn't working. I've followed all the tips I could find and I'm still getting the same result. I'm tempted to just add UI-Router to my application and replace my routes with states.
Found it. The issue was related to the hash-bang (#!) in the URL.
I added a link to my tab definitions which does not contain the hash-bang and it works perfectly now.
tabsController.js
Hope this helps someone.