AngularJS Changing & lt; body & gt; classe en utilisant la variable globale

Je viens de créer une application angularJS.

Voici mon 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.
}]);

J'ai login.html, register.html et forgotpassword.html, home.html. Chacun possède des Contrôleurs dans des fichiers séparés. 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";
        }
    }
});

De même, j'ai post méthodes dans d'autres contrôleurs.

Est ce que je veux, quand la vue est de vous connecter ou de vous inscrire ou mot de passe oublié, le corps de la classe doit être "login-layout". Donc, dans le corps j'ai mis class="{{bodylayout}}". Je sais que l'utilisation de variables globales, la valeur peut être définie. Mais je ne sais pas comment.

Dans app.js j'ai essayé ce

angular.module('myApp').factory("myService", function(){

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

    });

Mais ne savent pas comment l'utiliser.

source d'informationauteur Shiju K Babu

  1. 18

    Vous pouvez créer des variables globales dans les deux sens

    À l'aide de $rootScope vous pouvez faire quelque chose comme dans votre LoginController contrôleur

    angular.module('myApp').controller('LoginController', function($scope, $location, $window, $rootScope) {
   $scope.user = {};
   $rootScope.bodylayout = 'login-layout';

   //others code 
}

    À l'aide de service

    angular.module('myApp').factory("myService", function(){

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

});

    Utiliser ce service dans votre contrôleur

    angular.module('myApp').controller('LoginController', function($scope, $location, $window, myService) {
       $scope.user = {};
       $rootScope.bodylayout = myService.sharedObject.data; //get data from service

       //others code 
    }

    Où votre HTML ressemble

    <body class="{{bodylayout}}">

    Note dans ce cas, vous devez définir bodylayout dans chaque contrôleur sinon il utiliser l'ancienne valeur

  2. 10

    Essayez d'utiliser le $rootScope:

    $rootScope.bodyClass = 'login-layout';

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

    Vous pourriez traiter dans le des contrôleurs individuels, ou peut-être dans votre app.js en écoutant 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;
    }
});
  3. 7

    Vous pouvez créer un <body> directive ajouter et supprimer des événements de classe qui peuvent être déclenchées tout au long de votre application.

    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;
    }
  };
}]);

    Dans votre app.js config bloc, vous pouvez définir le <body> class à ce que vous voulez avec $emit 

    ## Add class
$rootScope.$emit('body:class:add', 'login-layout')

## Remove class
$rootScope.$emit('body:class:remove', 'login-layout')

    - il tout simplement utilise l'angle de jqLite addClass() et removeClass() et aussi ne pas vous obliger à puiser dans $element à l'aide de la directive link fonction qui a déjà des dom accès à l'élément.

    Même sans $rootScope vous pouvez l'appeler au sein de votre contrôleurs avec $scope.$emit('body:class:add', name).

  4. 1

    Je ne suis pas trop sûr le corrigé de travail Angulaire 1.4 x, mais je pense avoir une solution plus facile.

    Vous pouvez facilement ajouter un activeTab propriété de vos routes, comme ceci:

    .when('/register', {
        templateUrl: 'register.html',
        controller: 'RegisterController',
        activeTab: 'register'
      })

    Puis dans votre Contrôleur ajouter le $route de l'objet à votre $portée:

    .controller('RegisterController', ['$scope', '$route', function($scope, $route){
     $scope.$route = $route;
}])

    Et l'utilisation ng-classe de votre balise body:

    <body ng-class="{'register-class' : $route.current.activeTab == 'register' }">
</body>

    De cette façon, vous pouvez définir dynamiquement une classe sur votre corps étiquette lorsque vous changer de route. Espérons que cela aide quelqu'un!