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

检查我的另一个答案:AngularJS中依赖于路由的CSS页面转换

我得到了它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>