首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >AngularJS使用全局变量更改<body>类

AngularJS使用全局变量更改<body>类
EN

Stack Overflow用户
提问于 2014-01-06 13:50:34
回答 4查看 28.8K关注 0票数 17

我刚刚创建了一个angularJS应用程序。

这是我的index.html

代码语言:javascript
复制
<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

代码语言:javascript
复制
'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。每一个都在不同的文件中有不同的控制器。login.js、register.js、forgot.js、home.js。

login.js

代码语言:javascript
复制
'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"。所以我在body中放了class="{{bodylayout}}“,我知道使用全局变量,值可以设置,但是我不知道怎么做。

app.js中,我尝试了以下操作

代码语言:javascript
复制
angular.module('myApp').factory("myService", function(){

      return {
        sharedObject: { data: 'login-layout' }
      }; 

    });

但不知道如何使用它。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2014-01-06 14:44:54

您可以通过两种方式创建全局变量

使用$rootScope,您可以在LoginController控制器中执行类似的操作

代码语言:javascript
复制
angular.module('myApp').controller('LoginController', function($scope, $location, $window, $rootScope) {
   $scope.user = {};
   $rootScope.bodylayout = 'login-layout';

   //others code 
}

使用service

代码语言:javascript
复制
angular.module('myApp').factory("myService", function(){

      return {
        sharedObject: { data: 'login-layout' }
      }; 

});

在您的控制器中使用此服务

代码语言:javascript
复制
angular.module('myApp').controller('LoginController', function($scope, $location, $window, myService) {
       $scope.user = {};
       $rootScope.bodylayout = myService.sharedObject.data; // get data from service

       //others code 
    }

你的HTML是什么样子的

代码语言:javascript
复制
<body class="{{bodylayout}}">

注意:在这种情况下,您需要在每个控制器中设置bodylayout,否则它将使用旧值

票数 19
EN

Stack Overflow用户

发布于 2014-01-06 14:13:45

尝试使用$rootScope:

代码语言:javascript
复制
$rootScope.bodyClass = 'login-layout';

<body class="{{$root.bodyClass}}">

您可以在单个控制器中处理此问题,也可以通过侦听routeChangeSuccess在您的app.js中处理:

代码语言:javascript
复制
$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;
    }
});
票数 11
EN

Stack Overflow用户

发布于 2015-07-03 10:55:45

您可以创建一个<body>指令,该指令具有可以在整个应用程序中触发的添加和删除类事件。

代码语言:javascript
复制
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设置为所需的任何值

代码语言:javascript
复制
## 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)在控制器中调用它。

票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20943820

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档