Angular - 基于 $stateParams 更改路由状态更改的 css 类答案

【问题标题】：Angular - Change css class on route state change based on $stateParamsAngular - 基于 $stateParams 更改路由状态更改的 css 类
【发布时间】：2015-04-28 16:49:29
【问题描述】：

我在布局页面中有一个 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';
    }
});

我希望在使用$stateParams 更改路线时更改class。使用上面的代码，它确实发生了变化，但仅限于 previous 路由的 containerClass。

感谢任何帮助。

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案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>

【讨论】：

这是我的错。我试图简化这个问题，以便它可以帮助更广泛的人。实际上还涉及$stateParams。请查看更新后的问题。
nvermind。您的解决方案也适用于更新版本。唯一的事情是......我试图将类应用于也是ui-view 容器的div，但由于某种原因它不会这样做。我刚刚制作了一个包装器 div，一切都开始工作了。
我建议在 ui-view 元素上创建一个指令，再次查看我的其他答案：stackoverflow.com/questions/21211460/…
@Ilan Frumer 我让它在我的应用程序中运行但是......它不会在 ng-class="{{containerClass}}" 中使用任何类。它只需要您在 plunker 中拥有的 html 文本，例如“class: {{containerClass}}”，我对其进行了编辑，但也无法获得新课程。请帮帮我！
@totallytotallyamazing 应该是ng-class="containerClass" 没有插值，看看这个：plnkr.co/edit/AJsVNHMcSLM95F4LYZMy?p=preview

【解决方案2】：

你需要：

slugify 过滤器
将 $state 关联到 $rootScope
修改您的根模板以包含此变量。

第一

将$state 关联到$rootScope

angular.module("your-app", ['ui.router'])
        .run(['$rootScope',
              '$state',
              '$stateParams',
            function ($rootScope, $state, $stateParams) {
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;
            }]);

第二

包括一个 slugify 过滤器。像这样：http://paulsmith.github.io/angular-slugify/

第三

<body id="{{$state.current.name|slugify}}"> ... </body>

【讨论】：

【解决方案3】：

使用指令进行 DOM 操作总是更好，事实就是如此。在此示例中，我使用 ui-router

这是我正在使用的代码

指令：

(function() {
'use strict';

angular.module( 'directives' ).directive( 'bodyClass', bodyClass );

bodyClass.$inject = [ '$rootScope'];

function bodyClass(  $rootScope  ) {
    return function( scope, elem, attr ) {

        $rootScope.$on( "$stateChangeSuccess", function( event, next, current    ) {
            var url = next.name.replace( /\./g, '-' );
            elem.attr( 'class', '' ).addClass( url );
        } );
    };
}
;
})();

HTML

<body body-class></body>

结果

因此，如果您的 URL 类似于：app/welcome，您的 body 类将是：

<body class="app-welcome"></body>

【讨论】：

这不起作用，因为每次 $state 更改时您都会添加一个类，旧的类不会被删除

【解决方案4】：

改变

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

到

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

http://docs.angularjs.org/api/ng.directive:ngClass 所以，使用ng-class 指令，当你想访问一个范围变量（本地或根）时，只需声明名称，不要使用$root

【讨论】：