J'essaie d'utiliser $ location.path() à l'intérieur d'un intervalle $ pour naviguer automatiquement d'un onglet à l'autre sur une minuterie. Cependant, chaque fois que j'appelle $ location.path (x), il ne recharge que ma vue actuelle.
Mon code est le suivant:
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);
}());
Oui, oui, je sais à l'aide rootScope $ est pas conseillé. Je vais le changer une fois que $ location.path() fonctionnera.
Je l'ai essayé avec et sans les lignes if (!$scope.$$phase) $scope.$apply(). J'ai également essayé d'ajouter un appel à $location.replace() mais cela ne fait rien pour moi.
Chaque fois que $ location.path() est appelée, la section d'affichage clignote mais elle recharge simplement la vue Véhicules.
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
});
}());
Je ne sais pas pourquoi cela ne fonctionne pas. J'ai suivi tous les conseils que j'ai pu trouver et je reçois toujours le même résultat. Je suis tenté d'ajouter simplement UI-Router à mon application et de remplacer mes routes par des états.
Lorsque vous appelez '$ location.path ($ scope.tabs [i + 1] .link)' vous passez le chemin avec le préfixe. Pouvez-vous essayer de le retirer et voir si cela aide? Quelque chose comme '$ location.path ($ scope.tabs [i + 1] .link.replace ('#!', ''))'. –
Merci Stanislav. On dirait que nous avons tous les deux compris en même temps. – Ian
Content que cela fonctionne. Btw, pourquoi utilisez-vous '$ scope' avec controllerAs' var vm = this; '? Et je ne vois pas pourquoi vous avez vraiment besoin de 'si (! $ Scope. $$ phase) $ scope. $ Apply()'. –