Question

我不确定解决此问题的最佳方法。

我想在我的/login路线上动态设置一个班级，以便我的登录页面可以有一个大的背景图像。

最好的方法是什么？

这是我目前的代码：

<!DOCTYPE html>
<html class="SOME_DYNAMIC_CLASS_HERE_BASED_ON_ROUTE">
...
</html>
<body ng-app="myApp">
  <div ng-view=""></div>
</body>

angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
    $routeProvider
      .when('/login', {
        templateUrl: 'login.html',
        controller: 'LoginCtrl'
        })
      .when('/', {
        templateUrl: 'dashboard.html',
        controller: 'DashboardCtrl'
      })

Answer 1

您必须在ng-app元素中附加<html>，才能在角度和视图之间建立任何形式的连接。由于您希望根据应用程序的当前路径进行更改，因此为什么不将这些路由用作配置的参考，例如： $routeProvider配置。附加所有配置，包括从类到样式的配置或路径对象中的任何其他配置。然后，您可以创建一个指令，通过 $routeChangeSuccess 侦听路线更改，然后使用定义为的 $route 对象获取当前路线和其他属性$routeChangeSuccess侦听器的第二个参数，一旦有了这些属性，就可以随心所欲地执行任何操作e.g.将一个类附加到该指令元素。

<强> DEMO

<强>的Javascript

配置

  .config(function ($routeProvider) {
    $routeProvider
      .when('/dashboard', {
        templateUrl: 'dashboard.html',
        'class': 'bg-dashboard'
      })
      .when('/login', {
        templateUrl: 'login.html',
        'class': 'bg-login'
      })
      .otherwise({redirectTo: '/login'});
  });

指令

  .directive('classRoute', function($rootScope, $route) {

    return function(scope, elem, attr) {
      var previous = '';
      $rootScope.$on('$routeChangeSuccess', function(event, currentRoute) {
        var route = currentRoute.$$route;
        if(route) {

          var cls = route['class'];

          if(previous) {
            attr.$removeClass(previous);
          }

          if(cls) {
            previous = cls;
            attr.$addClass(cls);
          }
        }
      });
    };

  });

<强> HTML

<html ng-app="myApp" class-route>...</html>

Answer 2

使用指令是一种方法。

.directive("routeClass", function($location, $parse) {
    var mapping = {};
    return {
      restrict: "A",
      scope: {},
      link: function(scope, element, attrs) {
        mapping = $parse(attrs["routeClass"])(scope);
        // do something with mapping and $location or $routeParams
      }
    }
  });

<any route-class="{'/': 'default', '/Book': 'book'}" />

另一个 - 是通过$rootScope设置它。

Answer 3

我知道这是一个老线程，但我遇到它寻找一些指针。我已经选择了下面的方法，感觉更“Angular”。注意，它使用基于controllerAs的指令：

ngModule.directive('routeClass', routeClass);

function routeClass($state, $log) {

    function controllerFn($scope) {

        var routeClass = this;

        $scope.$on('$stateChangeSuccess', function(){
            // I have a different class name assignment as the 
            // setup of my states is relatively complex, 
            // but this should demonstrate the idea
            routeClass.current = 'page-' + $state.current.name;
        });
    }

    return {
        controller: controllerFn,
        controllerAs: 'routeClass',
        restrict: 'A'
    };
}

在index.html中使用如下：

<body ng-app="app" route-class ng-class="{{routeClass.current}}">

AngularJS根据路由动态设置标签上的类

3 个答案: