Question

 var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.controller('myCtrl', function($scope) {
    $scope.tab = 3;

});



mainApp.config(function($routeProvider) {
    $routeProvider
        .when('/cc', {
            templateUrl: 'cc.html',
        })
        .when('/pl', {
            templateUrl: 'pl.html',
        })

我正在使用路线根据用户选择显示不同的页面。我使用ng-class在用户点击该链接后更改所选页面链接的外观。 ng-class取决于在控制器中设置的变量tab的值。

问题 - 当我重新加载页面www.foo.com/pl时，视图显示pl.html但tab的值重置为3.从而使其他链接处于活动状态而不是＆＃34; PL＆＃34;

我希望tab的值根据正在加载的页面而改变（即使我刷新值也应该相应地改变）。我怎样才能达到这个目的？任何帮助将不胜感激。

Answer 1

您应该为每条路线添加一个参数：

mainApp.config(function($routeProvider) {
$routeProvider
    .when('/cc', {
        templateUrl: 'cc.html',
        selected: 1 
    })
    .when('/pl', {
        templateUrl: 'pl.html',
        selected: 2
    })

然后将$route注入控制器：

mainApp.controller('myCtrl', function($scope, $route) {
    $scope.tab = $route.current.selected;
});

使用ng-class指令在html中进行验证验证：

<a href="/cc" ng-class="{active: tab == 1}">link1</li>
<a href="/pl" ng-class="{active: tab == 2}">link2</li>

另一种方式是使用$location服务。

mainApp.controller('myCtrl', function($scope, $location) {
    $scope.tab = $location.path();
});

HTML：

<a href="/cc" ng-class="{active: tab == '/cc/'}">link1</li>
<a href="/pl" ng-class="{active: tab == '/pl/'}">link2</li>

根据routeProvider更改值

1 个答案: