AngularJS更改＆LT;身体GT;使用全局变量的类 [英] AngularJS Changing <body> class using global variable
问题描述
我刚刚创建了一个应用程序angularJS
I just created a angularJS application.
下面是我的 index.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>
app.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.
}]);
我的login.html，register.html和forgotpassword.html，home.html的。每个人都有单独的文件单独Controlers。 login.js，register.js，forgot.js，home.js。
I have login.html, register.html, and forgotpassword.html, home.html. Each one has separate Controlers in separate files. login.js, register.js, forgot.js, home.js.
login.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";
}
}
});
同样，我在其他控制器后的方法。
Similarly, I have post methods in other controllers.
我要的是，当视图登录或注册或forgotpassword，身体类应该是登录布局。因此，在身体，我把类={{} bodylayout} 。我知道使用全局变量，其值可以设置。但我不知道怎么样。
What I want is, when the view is login or register or forgotpassword, the body class should be "login-layout". So in body I put class="{{bodylayout}}". I know using global variables, the value can be set. But I don't know how to.
在 app.js 这个我试过
angular.module('myApp').factory("myService", function(){
return {
sharedObject: { data: 'login-layout' }
};
});
但不知道如何使用它。
But don't know how to use it.
推荐答案
您可以通过以下两种方式创建全局变量
You can create global variables in two way
- $ rootScope //已经提到@imcg
- 服务
- $rootScope //already mentioned @imcg
- service
使用 $ rootScope 你可以做这样的事情在你的的LoginController 控制器
Using $rootScope you can do something like in your LoginController controller
angular.module('myApp').controller('LoginController', function($scope, $location, $window, $rootScope) {
$scope.user = {};
$rootScope.bodylayout = 'login-layout';
//others code
}
使用服务
angular.module('myApp').factory("myService", function(){
return {
sharedObject: { data: 'login-layout' }
};
});
在你的控制器使用此服务
Use this service in your controller
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 每个控制器否则它使用旧值
Note in this case you need to set bodylayout in each controller otherwise it use the old value
这篇关于AngularJS更改＆LT;身体GT;使用全局变量的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
