AngularJSグローバル変数を使用して<body>クラスを変更する

私はちょうどangularJSアプリケーションを作成しました。ここでAngularJSグローバル変数を使用して<body>クラスを変更する

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

である私はhome.html、login.htmlを、register.html、およびforgotpassword.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メソッドを持っています。

私が望むのは、ビューがログイン、登録、またはパスワードがない場合、ボディクラスは"login-layout"である必要があります。だから、体に、私は値を設定することができ、グローバル変数を使用して知っている。しかし、私はどのように知りません。app.jsで

を、私はこの

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

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

    });

を試してみました。しかし。「class="{{bodylayout}}を置きますそれを使用する方法がわからない

出典

2014-01-06 Shiju K Babu

あなたは既にあなたが何かを行うことができます$rootScopeを使用

service

@imcg言及

$rootScope // 2つの方法でグローバル変数を作成することができますのようなLoginControllerコントローラ

0お使いのコントローラにservice

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

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

});

使用このサービスを使用して

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

    //others code 
}

あなたHTMLが、この場合には

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

よう注意に見える

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

     //others code 
    }

よそれぞれのコントローラーにbodylayoutを設定する必要があります。それ以外の場合は古い値を使用します。

出典

2014-01-06 06:44:54 Reza

ありがとうございます。他のコントローラーを設定するにはどうすればいいですか？ –

他のコントローラでは、 '$ rootScope.bodylayout = ''や$ rootScope.bodylayout = 'その他の値'' – Reza

を設定することができます。 '$ rootScope.bodylayout = myService.sharedObject.data; 'を使用しているため、コントローラから値を渡しません。また、各コントローラのページのタイトルを変更したいと思います。 –

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

$rootScope.bodyClass = 'login-layout'; 

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

あなたは個々のコントローラで、または多分あなたのAでこれを扱うことができますpp。routeChangeSuccessのために聞いて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; 
    } 
});

出典

2014-01-06 06:13:44 imcg

どこで使用しますか？どのjsファイルですか？ –

私は自分の答えを – imcg

更新しました。これは '$ rootScope'にあるので、私はまだサービス – Spock

<body>ディレクティブを作成して、アプリケーション全体でトリガーできるクラスイベントを追加および削除できます。あなたはそれが単に角度jqLite addClass()とremoveClass()を使用してもタップする必要はありません$emit

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

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

であなたが好きに<body>classを設定することができ、あなたのapp.jsconfigブロックで

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

要素へのDOMアクセス権をすでに持っている関数linkを使用して、$elementに変換します。

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

出典

2015-07-03 02:55:45 twmulloy

私はあまりにもアンギュラ1.4xのために提案された答えが働いているとは思っていませんが、私はもっと簡単な解決策があると思います。

あなたは簡単にこのようなあなたのルートにactiveTabプロパティを追加することができます。

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

と使用NG-クラス：

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

を次に、あなたのコントローラでは、あなたの$スコープに$ルートオブジェクトを追加しますあなたの身体のタグに：

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

この方法では、あなたの体のタグwhにクラスを動的に設定することができますあなたはルートを変更しますか？これが誰かを助けることを願って！

出典

2015-10-08 20:30:35 Yeysides

AngularJSグローバル変数を使用して<body>クラスを変更する

答えて

関連する問題