在一个简化的场景中,我有两个UI-Router状态,并希望为它们设置不同的页面背景颜色。
理想情况下,我想要做到以下几点:
理想情况下,我想要做到以下几点:
<body ng-class="background" ui-view>
</body>
然后在状态控制器中设置背景类(可能是动态的,即:在控制器中计算):
stateHelperProvider
.state({
name: 'a',
url: '/a',
templateUrl: 'views/a.html',
controller: function ($scope) {
$scope.background = 'bg1';
}
})
.state({
name: 'b',
url: '/b',
templateUrl: 'views/b.html',
controller: function ($scope) {
$scope.background = 'bg2';
}
});
但是在body标签上使用ui-view
属性会导致其被删除。因此,我必须将ui-view
属性放在body内的一个div上。
<body>
<div ui-view></div>
</body>
如何控制页面的背景颜色?
我知道有一些方法可以实现(例如在UI-Router的onEnter
函数中访问body的class DOM属性...),但是否有更好的方法呢?
或者只需要将div[ui-view]
设置为全屏高度(这不是一个简单的任务(链接)),并在该元素上设置背景以模仿应用于body时占用整个视口的背景效果(链接)?
$rootScope.$state = $state;
。这在答案的第一句中提到并加粗显示,但没有给出示例。您可以通过访问此链接https://dev59.com/ZHbZa4cB1Zd3GeqPFGBI找到示例代码,该链接也在答案中提供。 - Benjamin Conant