Question

我正在尝试在$ interval中使用$ location.path（）来自动导航到计时器上的tab到tab。

但是，每当我调用$ location.path（x）时，它只会重新加载我当前的视图。

我的代码如下：

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);
}());

是的，是的，我知道不建议使用$ rootScope。一旦我获得$ location.path（）工作，我就会改变它。

我已尝试使用和不使用if (!$scope.$$phase) $scope.$apply()行。我也尝试添加对$location.replace()的调用，但这对我没有任何作用。

每当调用$ location.path（）时，视图部分会闪烁但只是重新加载车辆视图。

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
    });


}());

不确定为什么这不起作用。我已经按照我能找到的所有提示，我仍然得到相同的结果。我很想将UI-Router添加到我的应用程序中并用状态替换我的路由。

Answer 1

找到它。该问题与URL中的hash-bang（＃！）有关。

我添加了一个指向我的标签定义的链接，该链接不包含hash-bang，现在效果很好。

<强> 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', refLink: '/vehicles', label: 'Vehicles', active: (($location.$$url.indexOf('/vehicle') !== -1) ? true : false) },
            { link: '#!/workzones', refLink: '/workzones', label: 'Workzones', active: (($location.$$url.indexOf('/workzone') !== -1) ? true : false) },
            { link: '#!/operatorStations', refLink: '/operatorStations', label: 'Operator Stations', active: (($location.$$url.indexOf('/operatorStation') !== -1) ? true : false) },
            { link: '#!/sessionStatus/123', refLink: '/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].refLink);
                        $location.replace();
                        if (!$scope.$$phase) $scope.$apply()

                        $scope.tabs[0].active = true;
                        $scope.selectedTab = $scope.tabs[0];
                        break;
                    }

                    else {

                        $location.path($scope.tabs[i + 1].refLink);
                        $location.replace();
                        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);
}());

希望这有助于某人。

$ location.path（）不起作用

1 个答案: