根据angularjs中的url更改body类答案

【问题标题】：Change class of body according to the url in angularjs根据angularjs中的url更改body类
【发布时间】：2015-09-12 21:14:25
【问题描述】：

这是我的网址

用于登录 - http://localhost/ang/#/login

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

这是我的body标签html

如果当前 url 是 http://localhost/ang/#/login，那么正文应该有 class="login-layout" 标签，即，

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

否则它应该有

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

我尝试在 php 中执行此操作，因为我无法在 # like said here 之后获取网址

AngularJS 本身可以做到这一点吗？

更新：

我尝试在 AngularJS 中做到这一点

从控制器我可以得到#之后的url

var nextUrl = next.$$route.originalPath;

但是如何更改类名..

【问题讨论】：

你考虑使用 ng-class 吗？

标签： javascript php jquery angularjs

【解决方案1】：

我会这样做

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

现在在登录控制器中就可以了

$rootScope.currentclass = "login-layout";

在其他每个控制器中都这样做

$rootScope.currentclass = "no-skin";

或

在 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";
    }
});

【讨论】：

嘿，你的回答很好，但我确实有问题..你能解决它吗

【解决方案2】：

我需要在一个项目中这样做，这就是我实现它的方式：

在我的主应用控制器中：

// 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('/', '');
    };

这会在作用域上公开当前路由名称。

然后我的身体标签只是这样写：

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

您可以类似地将其与 $state 一起使用并读取 $state.current.url 并将其分配给范围

【讨论】：

你能详细说明一下吗，因为我是初学者
谢谢，我试试
另外我建议您忘记无皮肤类，因为在 css 中您只能将内容分配给登录布局，并且它们不会出现在登录布局中的元素 no 中。这比添加更多逻辑来处理您不想拥有皮肤的逻辑要简单得多
让我们continue this discussion in chat.

【解决方案3】：

你可以像下面我的例子那样做

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

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

Shoud 控制器应该是这样的

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

【讨论】：

我收到此错误 ReferenceError: $scope is not defined
看，我的方法是针对控制器的——这意味着你需要在每个控制器中编写这段代码。如果你想执行一次这个功能——只需创建 mainController，然后把这个功能放在那里

【解决方案4】：

我认为解决它的最“Angular”方法是使用指令。最大的好处是您不必在使用的每个控制器中都设置范围变量。

这就是它的样子：

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

在您的 HTML 中：

<body class-by-location>

这是一个正常工作的插件：http://plnkr.co/edit/zT5l6x9KYOT1qeMOxtQU?p=preview

【讨论】：