关于javascript：根据angularjs中的url更改body的类


Change class of body according to the url in angularjs

这是我的网址

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

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

这是我的身体标签HTML

如果这是当前的url是http://localhost/ang/#/login，那么主体应该有class="login-layout"标记，即，

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

否则它应该

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

我尝试在php中这样做，因为我不能在#之后使用URL，如这里所说

这在安古拉吉斯是可能的吗？

更新：

我在安古拉基斯试过这样做

从控制器我可以在#之后得到URL

1
var nextUrl = next.$$route.originalPath;

但是我怎样才能更改类名……

相关讨论

我就是这样做的

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

现在在登录控制器中

1
$rootScope.currentclass ="login-layout";

在所有其他控制器中

1
$rootScope.currentclass ="no-skin";

或

在app.run中，只需检查登录路径。

1
2
3
4
5
6
7
8
9
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";
    }
});
相关讨论

我认为解决这个问题的最"角度"的方法是使用指令。最大的好处是，您不必在使用的每个控制器中设置范围变量。

这就是它的样子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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中：

1
<body class-by-location>

这是一个工作的突袭者：http://plnkr.co/edit/zt5l6x9kyot1qemoxtqu？P=预览

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

1
2
3
4
5
6
7
<body ng-cloak="" ng-class="bodyClass" class="login-layout>

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

shoud控制器应该像这样

1
2
3
4
5
6
7
angular.module('youAppName').controller('yourController', ["$scope", function($scope) {
    $scope.bodyClass ="mainClass"
    var nextUrl = next.$$route.originalPath;
    if (..) {
       $scope.bodyClass ="sometAnotherMainClass";
    }
    }]);
相关讨论

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

在我的主应用程序控制器中，我有：

1
2
3
4
5
6
7
8
9
10
11
// 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('/', '');
    };

显示作用域上的当前路由名称。

然后我的身体标签上写着：

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

同样，您可以将它与$state一起使用，并读取$state.current.url，并将其分配到scope。

相关讨论