Question

我有一个类似于此的角度应用程序：

<html>
   <body ng-app="my-app" ngcloak ng-controller="MainCtrl">

     ...stuff...

        <!-- Add your site or application content here -->
    <div ng-view=""></div>

     ....

视图由Routes设置：

 .when('/maps', {
            templateUrl: 'views/maps.html',
            controller: 'MapsCtrl'
        })

工作正常。我想知道的是我如何从当前位置获取课程，使用上面的例子，分配一个课程＆＃34; maps＆＃34;到页面特定CSS的body标签。

Answer 1

我会在MainController中设置一个监听器，如下所示：

$scope.$on('$routeChangeSuccess', function(newVal, oldVal) {
    if (oldVal !== newVal) {
        $scope.routeClassName = $route.current.className;
    }
});

在模板中：

<body ng-controller="mainController" ng-class="routeClassName">

然后你可以配置这样的路线：

$routeProvider
.when('/maps', {
    controller: 'mapsController',
    template: 'maps',
    className: 'maps'   // <--- class name
})
.when('/about', {
    controller: 'aboutController',
    template: 'about',
    className: 'about'  // <--- class name
})

演示：http://plnkr.co/edit/QUaw6SkgPfR4IPyKniXG?p=preview

Answer 2

您可以使用$ location服务找出当前位置，然后使用ng-class将其分配给您的body标签。 e.g。

JS

var MainCtrl = function($scope, $location) {
    $scope.$location = $location;
}

HTML

<body ng-class="{maps: '/maps' === '$location.path()'}"></body>

Angular JS根据显示的视图将类分配给body标签？

2 个答案:

演示：http://plnkr.co/edit/QUaw6SkgPfR4IPyKniXG?p=preview