动感的车身类角UI的路由器 [英] Dynamic body class with Angular UI-Router
问题描述
我试图找到一个优雅的方式有一个自定义动态类的 body标签,我可以从 UI的路由器配置方便地设置的
键,如果没有设置,我可以使用默认选项或无。
I'm trying to find an elegant way to have a custom dynamically class of the body tag that I can set easily from the ui-router configurations
and if none is set, I can use a default option or none.
示例:
routes.js 的
routes.js
$stateProvider
.state('login', {
url: "/login",
template: 'Login'
})
.state('register', {
url: "/register",
template: 'Register'
}).
.state('profile', {
url: "/profile",
template: 'Profile'
});;
简单的标记HTML 的
Simple markup HTML
<html>
<body class=""> <!-- Dynamically class to change -->
<div ui-view></div>
</body>
</html>
情景:的
Scenario:
1 - 参观状态
登录我应该在类的身体等于 AUTH
1 - Visiting the state
login I should have the class of the body equals to auth
2 - 参观状态
注册是在这一点上,都会有相同的 AUTH
类
2 - Visiting the state
register at this point it will have the same auth
class
3 - 参观状态
个人资料身体会有默认类或无
3 - Visiting the state
profile the body will have the default class or none
你如何做到这一点?
推荐答案
您可以有一个主AppController的控制这样的:
You can have a master AppController that controls this:
<html ng-app="app" ng-controller="AppController as appController">
...
<body class="{{ appController.bodyClasses }}">
在AppController的:
Inside AppController:
var vm = this;
vm.bodyClasses = 'default';
// this'll be called on every state change in the app
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
if (angular.isDefined(toState.data.bodyClasses)) {
vm.bodyClasses = toState.data.bodyClasses;
return;
}
vm.bodyClasses = 'default';
});
在您的路线DEFS:
.state('register', {
url: "/register",
template: 'Register',
data: {
bodyClasses: 'auth'
}
});
请参阅 UI路由器文档了解更多此数据属性的策略。
See UI Router documentation for more on this data-attribute strategy.
这篇关于动感的车身类角UI的路由器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!