在进入或离开AngularJS状态时更改CSS属性

Question

我有一个应用程序，我想在进入/退出角状态时更改CSS属性。我的CSS属性是 html 和 body 元素（基本上是背景）的背景颜色，它们在状态之间的转换上显示。我想改变那个背景的颜色，使转换看起来更好一些。有什么建议我怎么能在Angular中做到这一点？

Answer 1

当状态发生变化时，

ui-router $state服务会在$rootscope上广播事件。您可以收听这些事件并相应地应用您的样式更改。以下情况会导致您的身体在状态转换期间出现红色背景，并在以下情况下出现白色背景：

angular.module('myApp').run(function($rootScope){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
        //change body background 
        document.body.style.background = 'red';
    });
    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
        //reset body background
        document.body.style.background = 'white';
    });
});

ui-router $state docs