Fab*_*lio 20 javascript angularjs angular-ui-router
我正试图找到一种优雅的方式来获得一个自定义动态类的body标签,我可以从中轻松设置ui-router configurations,如果没有设置,我可以使用默认选项或无.
例:
routes.js
$stateProvider
.state('login', {
url: "/login",
template: 'Login'
})
.state('register', {
url: "/register",
template: 'Register'
}).
.state('profile', {
url: "/profile",
template: 'Profile'
});;
简单的标记HTML
<html>
<body class=""> <!-- Dynamically class to change -->
<div ui-view></div>
</body>
</html>
场景:
1 - 访问state 登录我应该有正文的类等于auth
2 - 此时访问state 注册表它将具有相同的auth类
3 - 访问state 配置文件时,正文将具有默认类或无
你是如何实现这一目标的？
jmq*_*jmq 28
你可以有一个控制它的主AppController:
<html ng-app="app" ng-controller="AppController as appController">
...
<body class="{{ appController.bodyClasses }}">
内部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路由器文档.
Jer*_*eir 27
这是与@jmq使用状态数据类似的方法,但实现为指令而不是控制器.(关于该指令的好处是你可以将它应用于任意元素)
示例标记
<body ng-app="app" route-css-classnames>
路由配置(routes.js)
$stateProvider
.state('login', {
url: "/login",
template: 'Login',
data : {
cssClassnames : 'auth'
}
})
.state('register', {
url: "/register",
template: 'Register',
data : {
cssClassnames : 'auth'
}
}).
.state('profile', {
url: "/profile",
template: 'Profile'
});
指令(routeCssClassnames.js)
(function () {
'use strict';
angular.module('shared').directive('routeCssClassnames', routeCssClassnames);
function routeCssClassnames($rootScope) {
return {
restrict: 'A',
scope: {},
link: function (scope, elem, attr, ctrl) {
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
var fromClassnames = angular.isDefined(fromState.data) && angular.isDefined(fromState.data.cssClassnames) ? fromState.data.cssClassnames : null;
var toClassnames = angular.isDefined(toState.data) && angular.isDefined(toState.data.cssClassnames) ? toState.data.cssClassnames : null;
// don't do anything if they are the same
if (fromClassnames != toClassnames) {
if (fromClassnames) {
elem.removeClass(fromClassnames);
}
if (toClassnames) {
elem.addClass(toClassnames);
}
}
});
}
}
}
}());
| 归档时间： |
|
| 查看次数： |
10445 次 |
| 最近记录： |