Question

我的问题是我有多个页面，每个页面需要不同的正文类。

因此，如果不使用$rootScope，我如何根据显示的页面在DOM中更改此内容？

<body class="class-that-needs-changing">

Answer 1

让我们使用这样的指令：

.directive('bodyClasses', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var classes;

            scope.$watch(function(scope) {
                return scope.$eval(attrs.bodyClasses);
            }, function(value) {
                classes = value;
                angular.element(document.body).addClass(value);
            });

            // Remove body class when scope or directive destroyed.
            scope.$on('$destroy', function() {
                angular.element(document.body).removeClass(classes);
            });
        }
    };
});

现在，在单独的HTML页面中使用此指令，如下所示：

<!-- remember, use single quote for string since we are evaluating it -->
<div body-classes="'new-class another-class'"></div>

或

<span body-classes="'foo' {{someScopeVariable}}"></div>

当加载特定页面或视图时，这些类将添加到body标记中。通过这种方式，您可以在每个单独的页面中将您的班级分开，并且您的主body标记不会混乱。

Answer 2

您有两个主要选择：

将一个变量添加到$ rootScope并完成它。如果你只有这个需要改变的身体类的全局设置，我会建议这很简单。
制作处理全局页面设置的角度服务。将此服务注入需要具有全局页面设置的控制器，然后从服务检索全局页面设置并将它们绑定到每个控制器范围。如果您有许多全局设置或需要任何业务逻辑，那么请改用此服务方法。

Answer 3

根据您的发布，我建议更改angular.Module.run中的正文类，此方法将注册一个任务，该任务将在角度应用程序完全加载时执行：

angular.module('myApp', [])
   .run(['$scope', function($scope){

        var className = 'different-classes';
        angular.element(document.body).addClass(className);

   }]);

由于您的多个页面是完全不同的html文件，因此每次从一个页面导航到另一个页面后，角度应用程序都会重新加载

Answer 4

您可以在app.js上配置它

// app.js

angular.module('myApp', [
   'ngCookies',
   'ngResource',
   'ngSanitize',
   'ngRoute'
])
.constant('config', {
   user1:'class1',
   user2:'class2'
})

// main.js

angular.module('myApp').controller('MainCtrl', [ '$scope', 'config',
   function ($scope, config) {
       console.log(config.user1);
   }
]);

Answer 5

而不是使用$rootScope你可以让监听器来检测视图更改意味着$routeChangeSuccess（我猜你用$routeProvider来改变视图）你应该有一个父控制器，您可以在其中创建侦听器

像：

var app = angular.module('myApp', ['ngRoute']);

app.controller('parentController', function($scope, $route) {
    $scope.$on('$routeChangeSuccess', function(newValue, oldValue) {
        if ( newValue !== oldValue ) {
            $scope.bodyClass = $route.current.viewClass;
        }
    });
});

并且您的提供商应该：

app.config(function($routeProvider) {
    $routeProvider.when('/list',{
       controller: 'listController',
       templateUrl: '/list.html',
       viewClass:  'class1'
    }).when('/details', {
       controller: 'detailsController',
       templateUrl: '/details.html',
       viewClass:  'class2'
    }).otherwise({
       redirectTo: '/list'
    });
});

所以你的HTML应该是这样的：

<body ng-controller="parentController" class="commonClasses" ng-class="bodyClass ">

可以访问PLUNKER DEMO

更改Angular 1中的body标记类

5 个答案: