Angular.js：根据使用的路径将类添加到范围之外的元素

How can I add a class outside of the scope? As you can see here I want to add a class to header, main and footer

如何在范围之外添加类?正如你在这里看到的,我想在header,main和footer中添加一个类

<header class="{{pageClass}}"></header>
<main class="{{pageClass}}" ng-view></main>
<footer class="{{pageClass}}"></footer>

This is my routing and the controller:

这是我的路由和控制器:

app.config(function($routeProvider) {

    $routeProvider
    .when('/chapter/:title', {
        templateUrl: 'article.html',
        controller: 'article'
    })
    .when('/suche', {
        templateUrl: 'search.html',
        controller: 'search'
    })   
    .otherwise({
        redirectTo: '/search'
    });

});

app.controller('article', function($scope) {
    $scope.pageClass = 'normal';
});

app.controller('search', function($scope) {
    $scope.pageClass = 'small';
});

Now I want to add the class 'normal' when the user has opened an article. If the user goes to the search-page, another class (i.e. 'small') should be added.

现在我想在用户打开文章时添加“正常”类。如果用户进入搜索页面,则应添加另一个类(即“小”)。

So there are always set a class to every three tags (header, main and footer). The difference is just which kind of routing is been used. Hope I could explain what I try to achieve.

因此,总是为每三个标签(页眉,主页脚和页脚)设置一个类。不同之处在于使用了哪种路由。希望我能解释一下我想要实现的目标。

3 个解决方案

#1

There would be an parent controller to your body tag that will have $scope.parent = {}; object which will have that className.

你的身体标签会有一个父控制器,它有$ scope.parent = {};将具有该className的对象。

Note

I've use $scope.parent = {}; because child controller can directly access className by doing $scope.parent.className Using Javascript prototypal inheritance here

我使用$ scope.parent = {};因为子控制器可以通过执行$ scope.parent.className直接访问className这里使用Javascript原型继承

Markup

<body ng-controller="parent">
  <header ng-class="parent.className"></header>
  <main ng-class="parent.className" ng-view></main>
  <footer ng-class="parent.className"></footer>
</body>

Code

app.controller('parent', function($scope) {
    $scope.parent = {};
});

app.controller('search', function($scope) {
    $scope.parent.pageClass = 'small';
});

app.controller('article', function($scope,) {
    $scope.parent.pageClass = 'normal';
});

Example Plunkr

#2

You need to put the class on a parent scope or on $rootScope if no other parent scope exists.

如果不存在其他父作用域,则需要将该类放在父作用域或$ rootScope上。

The scope of ng-view is only available to the tag itself and its children.

ng-view的范围仅适用于标记本身及其子项。

Change your controllers to:

将您的控制器更改为:

app.controller('article', function( $rootScope ) {
    $rootScope.pageClass = 'normal';
});

app.controller('search', function( $rootScope ) {
    $rootScope .pageClass = 'small';
});

#3

This is how I do it in my app:

这是我在我的应用程序中执行此操作的方式:

I have a main Controller that wraps everything.

我有一个主控制器,包装一切。

<html ng-controller="AppCtrl">
<---- code --->
<body onload="onLoad()" class="{{ viewClass }}">
    <div id="page" class="scale-fade-fast" ng-view></div>
<---- code --->

Route config of main module:

主模块的路由配置:

MainApp.config(['$routeProvider', function($routeProvider){
       $routeProvider
           .when('/path', {
              viewClass: 'myPageClass',
              templateUrl: 'path/to/tpl',
              controller: 'AnotherCtrl'
           })
<---- code --->

Listen on route change on main ctrl:

在主ctrl上听取路线变化:

MainApp.controller('AppCtrl',['$scope', function($scope){
    $scope.viewClass = 'defaultPageClass';
    $scope.$on('$routeChangeSuccess', function(evt, current, previous){
        if(current.viewClass) $scope.viewClass = current.viewClass;
    });
}]);

#1