Question

我有一个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函数。

Answer 1

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

来应用类

Answer 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 '';
    }
}

Answer 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侦听器并从外部更改类。

如何使用Angular切换标签

3 个答案:

HTML

的javascript