Css 不同UI路由器状态的不同正文背景_Css_Angularjs_Angular Ui Router

Css 不同UI路由器状态的不同正文背景

css angularjs

Css 不同UI路由器状态的不同正文背景,css,angularjs,angular-ui-router,Css,Angularjs,Angular Ui Router,在一个简化的场景中，我有两个UI路由器状态，希望它们有不同的主体背景颜色因此，理想情况下，我想做以下工作： <body ng-class="background" ui-view> </body> 但是将ui视图属性放在主体上会删除它。因此，我必须将ui视图属性放在主体内部的一个div上 <body> <div ui-view></div> </body> 现在如何控制身体背景？我知道各种各样的黑客行为（

在一个简化的场景中，我有两个UI路由器状态，希望它们有不同的主体背景颜色

因此，理想情况下，我想做以下工作：

<body ng-class="background" ui-view>
</body>

但是将

ui视图

属性放在主体上会删除它。因此，我必须将

ui视图

属性放在主体内部的一个div上

<body>
    <div ui-view></div>
</body>

现在如何控制身体背景？

我知道各种各样的黑客行为（例如，在UI路由器的

oneter

函数中访问body的class-DOM属性，…），但是有什么好方法可以做到这一点吗

或者，这一切都是为了使

div[ui view]

达到全高（即），并在该元素上设置背景，以模仿应用背景的方式？

可能不准确，但您可以直接在控制器中更改身体背景色吗

stateHelperProvider
    .state({
        name: 'a',
        url: '/a',
        templateUrl: 'views/a.html',
        controller: function ($scope) {
            document.body.style.background = 'bg1';
        }
    })
    .state({
        name: 'b',
        url: '/b',
        templateUrl: 'views/b.html',
        controller: function ($scope) {
            document.body.style.background = 'bg2';
        }
    });

或者在这种情况下，只需在主体中添加/删除CSS类

“祝你好运”

所以总结一下我的经验，有两种方法可以做到这一点。两者都要求

$state

服务位于

$rootScope

中。这很优雅，但我会选择这个解决方案

如果背景类仅取决于州，则将其添加到州的：

示例代码：

.state({
    ...,
    data: {
        bodyClass: 'bg1'
    }
});

.state({
    ...,
    resolve: {
        bodyClass: function($stateParams) {
            // do some calculation
            return ...
        }
    }
});

然后，在主体上放置一个ng类并引用当前状态的数据：

<body ng-class="$state.current.data.bodyClass">

然后，在主体上放置一个

ng类

，并通过以下方式引用解析的类名：

在这两种情况下，bodyClass都可以对有效的。

进行任何操作，并且可以使用类。问题是，如果我的状态

没有背景，那么前一个状态的背景将保持不变。当然，我可以在示波器上收听

$destroy

，但这也不是很优雅。如果主体上有一个带有“ngStyle”的控制器，它可以获取页面值并根据页面名称的条件更改背景，那该怎么办？可能不是很准确，但希望它能有所帮助。我可能可以将后台类作为一个类，然后使用

$rootScope

上的

$state

执行以下操作：

。不完全是你提出的，但受到了启发。我曾想过类似的事情，但更好。：）我刚刚意识到，我实际上需要动态计算每个状态的后台CSS类，这意味着它需要位于控制器或解析中。作为详细信息，有一种从

$state

访问已解析属性的方法。所以这可能是正确的选择。顺便说一句。更新页面标题对我有用吗！——只是想指出，为了让它工作，您必须运行

$rootScope.$state=$state内部运行。答案的第一句中提到了这一点，并用粗体表示，但没有给出示例。您可以通过以下链接找到示例代码，该链接也在答案中提供
.state({
    ...,
    resolve: {
        bodyClass: function($stateParams) {
            // do some calculation
            return ...
        }
    }
});

<body ng-class="$state.$current.locals.globals.bodyClass">