带有Angular UI-Router的动态主体类

一尘不染

带有Angular UI-Router的动态主体类

angularjs

我正在尝试找到一种优雅的方法来创建一个自定义的 body标签 动态类，该类可以从中轻松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 个人资料* ，身体将具有默认类别或没有默认类别 *

您如何实现的？

阅读 188

2020-07-04

共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';
});

内部路线定义：

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

有关此数据属性策略的更多信息，请参见UI Router文档。

2020-07-04