我刚刚创建了一个angularJS应用程序。
这是我的索引.html
<html ng-app="MyApp">
<head>
<!-- CSS files import -->
</head>
<body class="{{bodylayout}}">
<div ng-view></div>
</body>
<--! JS imports
aungular.js
app.js
login.js
register.js
-->
</html>
应用.js
'use strict';
//Define Routing for app
angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'RegisterController'
})
.when('/forgotPassword', {
templateUrl: 'forgotpassword.html',
controller: 'forgotController'
})
.when('/home', {
templateUrl: 'views/home.html',
})
.otherwise({
redirectTo: '/login'
});
// $locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);
我登录.html，注册.html，忘记密码.html，主页.html。每个控制器在单独的文件中都有单独的控制器。登录.js，注册.js，忘记.js，主页.js。
登录.js
'use strict';
angular.module('myApp').controller('LoginController', function($scope, $location, $window) {
$scope.user = {};
$scope.loginUser=function()
{
var username=$scope.user.name;
var password=$scope.user.password;
if(username=="admin" && password=="admin123")
{
$location.path( "/home" );
}
else
{
$scope.message="Error";
$scope.messagecolor="alert alert-danger";
}
}
});
同样，我在其他控制器中也有 post 方法。
我想要的是，当视图是登录或注册或忘记密码时，正文类应该"login-layout"。所以我在身体里放了class="{{bodylayout}}"。我知道使用全局变量，可以设置值。但我不知道该怎么做。
在应用程序中.js我试过这个
angular.module('myApp').factory("myService", function(){
return {
sharedObject: { data: 'login-layout' }
};
});
但不知道如何使用它。
您可以通过两种方式创建全局变量
- $rootScope//已经提到过@imcg
- 服务
使用$rootScope您可以像在LoginController控制器中一样执行某些操作
angular.module('myApp').controller('LoginController', function($scope, $location, $window, $rootScope) {
$scope.user = {};
$rootScope.bodylayout = 'login-layout';
//others code
}
使用service
angular.module('myApp').factory("myService", function(){
return {
sharedObject: { data: 'login-layout' }
};
});
在控制器中使用此服务
angular.module('myApp').controller('LoginController', function($scope, $location, $window, myService) {
$scope.user = {};
$rootScope.bodylayout = myService.sharedObject.data; // get data from service
//others code
}
您的HTML的外观
<body class="{{bodylayout}}">
请注意，在这种情况下，您需要在每个控制器中设置bodylayout，否则它将使用旧值
尝试使用以下$rootScope：
$rootScope.bodyClass = 'login-layout';
<body class="{{$root.bodyClass}}">
您可以在单个控制器中处理此问题.js也可以在您的应用程序中通过侦听 routeChangeSuccess 来处理：
$rootScope.$on('$routeChangeSuccess', function (event, currentRoute) {
switch(currentRoute.templateUrl) {
case 'login.html':
case 'register.html':
case 'forgotpassword.html':
$rootScope.bodyClass = 'login-layout';
break;
default:
$rootScope.bodyClass = '';
break;
}
});
你可以创建一个 <body> 指令，该指令具有添加和删除可在整个应用中触发的类事件。
angular.module('myApp').directive('body', [function(){
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.$on('body:class:add', function(e, name){
element.addClass(name);
};
scope.$on('body:class:remove', function(e, name){
element.removeClass(name);
};
return;
}
};
}]);
在app.js config块中，您可以使用$emit将<body> class设置为所需的任何
## Add class
$rootScope.$emit('body:class:add', 'login-layout')
## Remove class
$rootScope.$emit('body:class:remove', 'login-layout')
它只是简单地使用 Angular jqLite addClass() 和 removeClass()，也不需要您使用已经具有 DOM 访问权限的指令link函数来利用$element。
即使没有$rootScope您也可以使用 $scope.$emit('body:class:add', name) 在控制器中调用它。
我不太确定建议的答案是否适用于 Angular 1.4x，但我认为我有一个更简单的解决方案。
您可以轻松地将 activeTab 属性添加到路由中，如下所示：
.when('/register', {
templateUrl: 'register.html',
controller: 'RegisterController',
activeTab: 'register'
})
然后在控制器中将$route对象添加到$scope：
.controller('RegisterController', ['$scope', '$route', function($scope, $route){
$scope.$route = $route;
}])
并在您的身体标签上使用 ng-class：
<body ng-class="{'register-class' : $route.current.activeTab == 'register' }">
</body>
这样，您可以在更改路线时在正文标签上动态设置类。希望这对某人有所帮助！