web-dev-qa-db-ja.com

AngularJSグローバル変数を使用した<body>クラスの変更

私はangularJSアプリケーションを作成しました。

これが私の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があります。それぞれが別々のファイルに別々のコントローラーを持っています。 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";
        }
    }
});

同様に、他のコントローラーにpostメソッドがあります。

私が欲しいのは、ビューがログイン、登録、またはforgotpasswordの場合、ボディクラスは"login-layout"。だから私はclass="{{bodylayout}} "。グローバル変数を使用することは知っています。値を設定できます。しかし、方法はわかりません。

app.jsでこれを試しました

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

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

    });

しかし、それを使用する方法がわかりません。

javascriptjqueryhtmlangularjsglobal-variables
17
Shiju K Babu

グローバル変数は2つの方法で作成できます

$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を設定する必要があります。そうしないと、古い値が使用されます

19
Reza

$ rootScopeを使用してみてください：

$rootScope.bodyClass = 'login-layout';

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

個別のコントローラーで、またはrouteChangeSuccessをリッスンしてapp.jsでこれを処理できます。

$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;
    }
});
10
imcg

アプリ全体でトリガーできるクラスイベントを追加および削除する_<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ブロックでは、_<body>_ classを_$emit_で好きなように設定できます

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

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

単にangular jqLit​​e addClass()およびremoveClass()を使用するだけであり、ディレクティブを使用して_$element_にアクセスする必要もありません。要素へのdomアクセスをすでに持っているlink関数。

_$rootScope_がなくても、コントローラ内で$scope.$emit('body:class:add', name)を使用して呼び出すことができます。

8
twmulloy

提案された回答が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>

このようにして、ルートを変更したときにbodyタグにクラスを動的に設定できます。これが誰かを助けることを願っています！

1
Yeysides