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>

Answer 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>

Answer 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>

<强> RESULT

因此，如果您有以下网址： app / welcome ，您的正文类将为：

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

Answer 4

更改

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

到

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

http://docs.angularjs.org/api/ng.directive:ngClass 因此，使用ng-class指令，当您想要访问范围变量（本地或根）时，只需说出名称，不要使用$root

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

4 个答案:

我更喜欢做这样的事情