angularjs - Angular-基于$ stateParams更改路线状态更改的CSS类

Question

我在版面页面中有一个div:

<div class="{{$root.containerClass}}">...</div>

有两种路由状态:

.state('controllerAction', {
    url: '/:controller/:action',
    templateUrl: function($stateParams) {
         return $stateParams.controller + '/' + $stateParams.action;
    },
    controllerProvider: function($stateParams) {
         return $stateParams.controller + $stateParams.action + 'Controller';
    },
    onEnter: function($rootScope, $stateParams) {
        $rootScope.containerId = $stateParams.controller.toLowerCase() + '-index';
    }
})
.state('controller', {
    url: '/:controller',
    templateUrl: function($stateParams) {
         return $stateParams.controller + '/index';
    },
    controllerProvider: function($stateParams) {
         return $stateParams.controller + 'Controller';
    },
    onEnter: function($rootScope, $stateParams) {
        $rootScope.containerId = $stateParams.controller.toLowerCase() + '-index';
    }
});

我希望当使用class更改路线时更改$stateParams。使用上面的代码，它确实会更改，但只会更改为先前路由的containerClass。

任何帮助表示赞赏。

Answer 1

检查我的其他答案:Route-Dependent CSS Page Transitions in AngularJS

我将它与onEnter和plunker一起使用:http://plnkr.co/edit/LEMntLYosA2gIvNzw5gv?p=preview

我喜欢做这样的事情

这是一个小矮人:http://plnkr.co/edit/3Wof05ck3lVLqgTBDOew?p=preview

收听$stateChangeSuccess事件:

国家:

.state('home', {
    url: '/',
    templateUrl: '/account/index.html',
    controller: 'AccountLoginController',
    containerClass: 'account-index'
})
.state('book', {
    url: '/Book',
    templateUrl: '/book/index.html',
    controller: 'BookController',
    containerClass: 'book-index'
})

运行块:

app.run(function($rootScope){

    $rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
        $rootScope.containerClass = toState.containerClass;
    });

});

标记:

<div ng-class="{{containerClass}}">...</div>