Question

这是我的网址

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

对于信息中心 - http://localhost/ang/#/dashboard

这是我的身体标签html

如果这是当前网址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

中这样做

从控制器我可以获得#

之后的网址

var nextUrl = next.$$route.originalPath;

但是如何更改班级名称..

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

Answer 2

我需要在项目中执行此操作，这就是我实现它的方式：

在我的主app控制器中我有：

// 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并将其分配到范围

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

Answer 4

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

它的外观如下：

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

根据angularjs中的url更改body的类

4 个答案: