Fatal编程技术网
  • javascript/
  • Javascript 根据angularjs中的url更改主体的类

Javascript 根据angularjs中的url更改主体的类

javascript php jquery angularjs

Javascript 根据angularjs中的url更改主体的类,javascript,php,jquery,angularjs,Javascript,Php,Jquery,Angularjs,这是我的网址 用于登录-http://localhost/ang/#/login 对于仪表板-http://localhost/ang/#/dashboard 这是我的身体标签的html 如果这是当前url，则为http://localhost/ang/#/login则主体应具有class=“login layout”标记，即 <body ng-cloak="" class="login-layout> 但是我怎样才能更改类名 我需要在项目中做到这一点，我就是这样做到的： 在我的

这是我的网址

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

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

这是我的身体标签的html

如果这是当前url，则为
http://localhost/ang/#/login
则主体应具有
class=“login layout”
标记，即

<body ng-cloak="" class="login-layout>
但是我怎样才能更改类名

我需要在项目中做到这一点，我就是这样做到的：

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

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

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

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

// 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
，并将其分配到作用域中

<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";
    }
});
我会这样做的

<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";
    }
});
你可以像我下面的例子那样做

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

$scope.bodyClass = "mainClass"
var nextUrl = next.$$route.originalPath;
if (..) {
   $scope.bodyClass = "sometAnotherMainClass";
}
你可以像我下面的例子那样做

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

$scope.bodyClass = "mainClass"
var nextUrl = next.$$route.originalPath;
if (..) {
   $scope.bodyClass = "sometAnotherMainClass";
}
我认为最“有角度”的解决方法是使用指令。最大的好处是，您不必在使用的每个控制器中设置范围变量

这就是它的样子：

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>
这是一个可行的方法：

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

这就是它的样子：

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>
这是一个有用的例子：

你能详细说明一下吗，因为我是IT新手，我会尝试一下，所以我建议你忘记无皮肤类，因为在css中，你只能将内容分配给登录布局，它们不会出现在登录布局中的元素no中。这比添加更多的逻辑来处理你不想要的皮肤要简单得多。请你详细说明一下，因为我是IT新手，我会尝试一下。所以我建议你忘记无皮肤类，因为在css中，你只能将内容分配给登录布局，它们不会在登录布局中出现。这比添加更多的逻辑来处理一个你不想让皮肤放弃的简单得多。你考虑使用NG类吗？你考虑使用NG类吗？我得到这个错误引用错误：$范围没有定义。我的方法是针对控制器-这意味着您需要在每个控制器中编写此代码。如果您想执行此功能一次-只需创建Main controller，并将此功能放在那里我收到此错误引用错误：$scope未定义查看，我的方法是针对控制器-这意味着您需要在每个控制器中编写此代码。如果您想执行此功能一次-只需创建Main controller，并将此功能放在那里。嘿，您的答案很好，但我确实有一个问题。。你能解决它吗？你的答案很好，但我确实有个问题。。你能解决它吗