Angularjs 基于$stateparms的路由状态更改的角度更改css类_Angularjs_Angular Ui Router

Angularjs 基于$stateparms的路由状态更改的角度更改css类

angularjs

Angularjs 基于$stateparms的路由状态更改的角度更改css类,angularjs,angular-ui-router,Angularjs,Angular Ui Router,我在布局页面中有一个div： <div class="{{$root.containerClass}}">...</div> 我希望在使用$stateParams更改路由时更改类。上面的代码确实会改变，但只会改变上一条路线的集装箱类感谢您的帮助。请查看我的其他答案：我使用的是oneter，plunker: 我更喜欢这样做这是一个扑克牌：收听$stateChangeSuccess事件：状态： .state('home', { url: '/',

我在布局页面中有一个div：

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

我希望在使用

$stateParams

更改路由时更改

类。上面的代码确实会改变，但只会改变上一条路线的集装箱类
感谢您的帮助。
请查看我的其他答案：
我使用的是oneter
，plunker:
我更喜欢这样做
这是一个扑克牌：
收听$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>

(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 );
        } );
    };
}
;
})();

运行块：
.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>

(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 );
        } );
    };
}
;
})();

标记：
.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>

(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 );
        } );
    };
}
;
})();

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

。。。

到
。。。


因此，请使用ng class
指令，当您想要访问范围变量（本地变量或根变量）时，只需说明名称，不要使用$root
您需要：

缓动滤波器
将$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过滤器。大概是这样的：
第三
<body id="{{$state.current.name|slugify}}"> ... </body>

。。。
在DOM操作中使用指令总是更好的，事实就是这样。在本例中，我使用的是
这是我正在使用的代码
指令：
.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>

(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 class="app-welcome"></body>


这是我的错。我试图简化这个问题，以便对更广泛的人群有所帮助。实际上还涉及到$stateParams
。请参阅更新的问题。重新确认。您的解决方案也适用于更新版本。唯一的问题是。。。我试图将类应用于div，它也是一个ui视图
容器，但由于某些原因，它不会这样做。我刚做了一个包装器div，所有的都开始工作了。我建议在ui-view
元素上创建一个指令，再次检查我的另一个答案：@Ilan-Frumer我的应用程序中正在运行它，但是。。。它不会接受ng class=“{{containerClass}}”中的任何类。它只接受html文本，例如“类：{{{containerClass}}”，您的plunker中有，我编辑了它，也无法让它接受新类。请帮帮我@Totalytallyamazing如果没有插值，它应该是ng class=“containerClass”
，请检查：这不起作用，因为每次$state更改时都会添加一个类，旧类不会被删除