个人中心
gpt4 book ai didi

javascript - 使用 Angular UI-Router 的动态主体类

转载 作者：行者123 更新时间：2023-12-02 22:57:52 25 4
gpt4 key购买 nike

我正在尝试找到一种优雅的方式来拥有body标签的自定义动态类，我可以从ui-router配置轻松设置它，如果没有的话设置后，我可以使用默认选项或不使用。

示例:

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 - 访问状态 登录我应该让正文的class等于auth

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

3 - 访问state profile主体将具有默认类或无

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

最佳答案

您可以有一个主 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 documentation有关此数据属性策略的更多信息。

关于javascript - 使用 Angular UI-Router 的动态主体类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28204606/

25 4 0
文章推荐： mongodb - 为什么 docker commit 没有将数据保存在我的 mongo 数据库容器中？
文章推荐： biopython - 将 FASTA 转换为 GenBank
文章推荐： JavaScript 创建对象的新实例
文章推荐： javascript - 我应该使用 ScriptSharp
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com