如何使用 Angular 切换 <body> 标签答案

【问题标题】：How to switch <body> tags with Angular如何使用 Angular 切换 <body> 标签
【发布时间】：2018-03-05 22:27:43
【问题描述】：

我有一个 HTML 模板，每个屏幕的 <body> 标记中有一些类。喜欢这个登录屏幕：

<body class="login-screen doABC doXZY etc">...

还有这个注册屏幕：

<body class="signup-screen doQWE doQAZ etc">...

使用 Angular 切换这些屏幕的最佳方法是什么，并考虑到我无法创建如下容器：

<body>
  <div class="login-screen doABC doXZY etc" ng-If="app1">
    ...
  </div>
  <div class="signup-screen doQWE doQAZ etc" ng-If="app2">
    ...
  </div>
</body>

因为类需要在<body> 标记中才能工作，重构所有内容将非常耗时。请注意，这些类同时触发 CSS 和 JS 函数。

【问题讨论】：

你可以change<body> class using global variable
你可以change <body> class using global variable

标签： javascript html angularjs

【解决方案1】：

使用 ng-style 或 ng-class 使用 angularjs 应用类

【讨论】：

【解决方案2】：

尝试使用ngClass 根据scope.app1 值进行评估。一般的 html class 优先规则在这里仍然适用。 doABC 然后doXZY 等等...

html

<body class="doABC doXZY etc" ng-class="screenBasedClass()"></body>

脚本

$scope.screenBasedClass = function () {
    if ($scope.app1) {
        return 'login-screen'
    } else if ($scope.app2) {
        return 'signup-screen';
    } else {
        return '';
    }
}

【讨论】：

【解决方案3】：

您可以使用ng-class 功能。

将ng-app 保留在html 标记和根级别控制appCtrl 以及html
在根控制appCtrl 中保留范围值，并且每当您切换屏幕时，更改类名称。

html

<html ng-app="app" ng-controller="appCtrl">
<head>
</head>
<body class="doABC doXZY etc" ng-class="bodyClass">
    <!-- body content or routing div -->
</body>
</html>

javascript

app.controller('appCtrl', function($scope) {
    $scope.bodyClass = '';

    $scope.changeBodyClass(className) {
        $scope.bodyClass = className
    }
})

当你想改变班级时，你可以通过changeBodyClass方法改变班级。您还可以放置一个$broadcast 监听器并从外部更改类。

【讨论】：