jac*_*uac 6 css angularjs angular-ui-router
在简化的场景中,我有两个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';
}
});
但是将ui-view属性放在正文上会删除它.所以我必须把ui-view属性放在体内的div上.
<body>
<div ui-view></div>
</body>
我现在如何控制身体背景？
我知道各种hacks(例如在onEnterUI-Router 的函数中访问body的类DOM属性,...),但有一个很好的方法吗？
或者是关于制作div[ui-view]完整高度(这不是微不足道)并在此元素上设置背景来模仿如何在身体上应用背景占据整个视口？
所以总结一下我的学习，有两种方法可以做到。两者都要求服务$state位于$rootScope. 这种优雅性可能存在争议，但我会选择这种解决方案。
示例代码：
.state({
...,
data: {
bodyClass: 'bg1'
}
});
然后，在主体上放置一个 ng-class 并引用当前状态的数据：
<body ng-class="$state.current.data.bodyClass">
示例代码：
.state({
...,
resolve: {
bodyClass: function($stateParams) {
// do some calculation
return ...
}
}
});
然后，在主体上放置一个ng-class并通过以下方式引用已解析的类名$state.$current.locals.globals：
<body ng-class="$state.$current.locals.globals.bodyClass">
ng-class在这两种情况下， bodyClass 可以是对指令有效的任何内容。
| 归档时间： |
|
| 查看次数： |
2459 次 |
| 最近记录： |