根据angularjs中的url更改body的类

Question

Here is my url这是我的网址

For Login - http://localhost/ang/#/login登录 - http://localhost/ang/#/login

For Dashboard - http://localhost/ang/#/dashboard对于仪表板 - http://localhost/ang/#/dashboard

Here is my html for body tag这是我的 body 标签的 html

If this is current url is http://localhost/ang/#/login then the body should have the class="login-layout" tag ie,如果这是当前的 url 是http://localhost/ang/#/login那么主体应该有class="login-layout"标签，即，

<body ng-cloak="" class="login-layout>

else it should have否则它应该有

<body ng-cloak="" class="no-skin">

I tried to take do this in php by i can't take the url after # like said here我试图在 php 中执行此操作，因为我无法在#之后获取 url，就像这里所说的

Is this possible to do in AngularJS itself ?这可以在 AngularJS 本身中做到吗？

Update :更新：

I tried to do this in AngularJS我试图在 AngularJS 中做到这一点

From the controller i can get the url after #从控制器中，我可以在#之后获取 url

var nextUrl = next.$$route.originalPath;

but how can i change the class name..但是我怎样才能改变班级名称..

Answer 1

this is how i would do这就是我要做的

<body class="{{currentclass}}" ng-cloak>

now in login controller just do现在在登录控制器中

$rootScope.currentclass = "login-layout";

and in every other controller just do并且在其他所有控制器中

$rootScope.currentclass = "no-skin";

OR或者

in app.run just check for the login path.在 app.run 中只需检查登录路径。

app.run(function($rootScope, $location){
rootScope.$on('$routeChangeStart', function(event, next, current){
    if ($location.path() == '/login') {
          $rootScope.currentclass = "login-layout";
    }
    else{
          $rootScope.currentclass = "no-skin";
    }
});

Answer 2

I need to do this in a project and this is how I achieved it:我需要在一个项目中做到这一点，这就是我实现它的方式：

inside my main app controller I have:在我的主应用程序控制器中，我有：

// Inject the $location service in your controller
// so it is available to be used and assigned to $scope
.controller('AppCtrl', ["$scope", "$location",...

    // this_route() will be the variable you can use
    // inside angular templates to retrieve the classname
    // use it like class="{{this_route}}-layout"
    // this will give you -> e.g. class="dashboard-layout"
    $scope.this_route = function(){
         return $location.path().replace('/', '');
    };

Which exposes the current route name on the scope.它在范围内公开当前路由名称。

then my body tag simply reads this like:然后我的身体标签只是这样写：

<body ng-controller="AppCtrl" class="{{this_route()}}-view" ng-cloak>

You can similarly use this with $state and read the $state.current.url and assing it to scope您可以类似地将它与 $state 一起使用并读取$state.current.url并将其分配到范围

Answer 3

You can do it like in my example below你可以像我下面的例子那样做

<body ng-cloak="" ng-class="bodyClass" class="login-layout>

$scope.bodyClass = "mainClass"
var nextUrl = next.$$route.originalPath;
if (..) {
   $scope.bodyClass = "sometAnotherMainClass";
}

Shoud controller should look like this应该控制器应该是这样的

angular.module('youAppName').controller('yourController', [ "$scope", function($scope) {
    $scope.bodyClass = "mainClass"
    var nextUrl = next.$$route.originalPath;
    if (..) {
       $scope.bodyClass = "sometAnotherMainClass";
    }
    }]);

Answer 4

I think that the most "Angular" way to solve it is using a directive.我认为解决它的最“角度”的方法是使用指令。 The biggest benefit is that you don't have to set a scope variable in every controller you use.最大的好处是您不必在您使用的每个控制器中设置范围变量。

This is how it would look:这是它的外观：

app.directive('classByLocation', ['$location', function($location) {
  var link = function(scope, element) {
    scope.$on('$routeChangeSuccess', function() {
      if ($location.path() == '/login') {
        element.removeClass('no-skin').addClass('login');
      }
      else{
        element.removeClass('login').addClass('no-skin');
      }
    });
  };

  return {
    restrict: 'A',
    link: link
  };
}]);

And in your HTML:在你的 HTML 中：

<body class-by-location>

Here is a working plunker: http://plnkr.co/edit/zT5l6x9KYOT1qeMOxtQU?p=preview这是一个工作plunker： http ://plnkr.co/edit/zT5l6x9KYOT1qeMOxtQU?p=preview

根据angularjs中的url更改body的类

问题描述

4 个解决方案

解决方案1
2 2015-09-12 11:43:10

解决方案2
1 已采纳 2015-09-12 11:34:10

解决方案3
1 2015-09-12 11:56:45

解决方案4
1 2015-09-12 13:14:25

根据angularjs中的url更改body的类

问题描述

4 个解决方案

解决方案1 2 2015-09-12 11:43:10

解决方案2 1 已采纳 2015-09-12 11:34:10

解决方案3 1 2015-09-12 11:56:45

解决方案4 1 2015-09-12 13:14:25

解决方案1
2 2015-09-12 11:43:10

解决方案2
1 已采纳 2015-09-12 11:34:10

解决方案3
1 2015-09-12 11:56:45

解决方案4
1 2015-09-12 13:14:25