Question

我试图找到一种优雅的方式来设置正文标记的自定义动态类，我可以轻松地从ui-router configurations设置，如果没有设置，我可以使用默认选项，也可以不使用。

示例：

routes.js

$stateProvider
      .state('login', {
           url: "/login",
           template: 'Login'
      })
      .state('register', {
           url: "/register",
           template: 'Register'
      }).
      .state('profile', {
           url: "/profile",
           template: 'Profile'
      });;

简单标记HTML

<html>
   <body class=""> <!-- Dynamically class to change -->
      <div ui-view></div>
   </body>
</html>

方案：

1 - 访问state 登录我应该让正文的类等于auth

2 - 此时访问state 注册，它将具有相同的auth类

3 - 访问state 个人资料，正文将包含默认类或无

你是如何实现这一目标的？

Answer 1

你可以拥有一个控制它的主AppController：

<html ng-app="app" ng-controller="AppController as appController">
...
<body class="{{ appController.bodyClasses }}">

内部AppController：

var vm = this;
vm.bodyClasses = 'default';

// this'll be called on every state change in the app
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
    if (angular.isDefined(toState.data.bodyClasses)) {
        vm.bodyClasses = toState.data.bodyClasses;
        return;
    }

    vm.bodyClasses = 'default';
});

你的路线defs：

  .state('register', {
       url: "/register",
       template: 'Register',
       data: {
           bodyClasses: 'auth'
       }
  });

有关此数据属性策略的详情，请参阅UI Router documentation。

Answer 2

这里的方法与@ jmq使用状态数据类似，但实现为指令而不是控制器。（关于该指令的好处是你可以将它应用于任何任意元素）

示例加价

object

路线配置（routes.js）

<body ng-app="app" route-css-classnames>

指令（routeCssClassnames.js）

$stateProvider
  .state('login', {
       url: "/login",
       template: 'Login',
       data : {
           cssClassnames : 'auth'
       }
  })
  .state('register', {
       url: "/register",
       template: 'Register',
       data : {
           cssClassnames : 'auth'
       }
  }).
  .state('profile', {
       url: "/profile",
       template: 'Profile'
  });

Answer 3

您也可以在身体标签上或任何需要的地方使用它。

ng-class="$state.current.name"

Answer 4

这只是使用ui-router@1.x转换钩子的@ JeremyWeir指令的一个版本。

import angular from 'angular';

class RouteCssClassNamesDirective {
  constructor($transitions) {
    this.$transitions = $transitions;
    this.restrict = 'A';
  }

  link(scope, element, attrs) {
    this.$transitions.onSuccess({}, (trans) => {
      const fromClassNames = angular.isDefined(trans.from().data) && angular.isDefined(trans.from().data.cssClassNames) ? trans.from().data.cssClassNames : null;
      const toClassNames = angular.isDefined(trans.to().data) && angular.isDefined(trans.to().data.cssClassNames) ? trans.to().data.cssClassNames : null;
      if (fromClassNames !== toClassNames) {
        if (fromClassNames) {
          element.removeClass(fromClassNames);
        }
        if (toClassNames) {
          element.addClass(toClassNames);
        }
      }
    });
  }

  static create() {
    return new RouteCssClassNamesDirective(...arguments);
  }

}

RouteCssClassNamesDirective.create.$inject = ['$transitions'];

export default angular.module('shared')
  .directive('routeCssClassNames', RouteCssClassNamesDirective.create);

具有Angular UI-Router的动态body类

4 个答案: