AngularJs - Изменить идентификатор тела или Css с помощью Ng-view

Question

AngularJs - Изменить идентификатор тела или Css с помощью Ng-view

0

У меня есть определенные страницы, у которых есть другой цвет фона.

Как я могу изменить тело css или дать телу другой идентификационный тег для каждого TemplateURL?

Я могу изменить фон URL шаблона, но его не полный фон. Я хочу изменить цвет фона всего тела.

Индекс HTML

<body data-ng-controller="HeaderCtrl" data-ng-class="body[[bodyClass]]"> <!-- I want to be able to change this with different page views -->

  <div>
    <div class="top-header" data-ng-include="templateUrl"></div>
  </div>

  <div class="page [[ pageClass ]]" ng-view autoscroll="true">
  </div>

</body>

Javascript

var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);

app.config(function($interpolateProvider, $routeProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');

  $routeProvider

    .when('/frontdesk', {
      templateUrl : 'pages/frontdesk.html',
      controller : 'FrontdeskCtrl'
  })
  .otherwise({ 
      redirectTo: '/signin'
  });
});

контроллер

app.controller('HeaderCtrl', function($scope, $location) {
$scope.pageClass = 'top-header';
$scope.$on('$locationChangeSuccess', function() {
    var path = $location.path();
    $scope.templateUrl = (path==='/signin' || path==='/contact') ? 'pages/SigninHeader.html' : 'pages/NormalHeader.html' ;
});
$scope.$on('$locationChangeSuccess', function() {
    var path = $location.path();
    $scope.bodyClass = (path==='/room' || path==='/frontdesk') ? 'dark' : 'white';
});
});

CSS

.bodydark {
  background-color: #000 !important;
}

.bodywhite {
  background-color: #fff !important;
}

Austin Perez 29 июнь 2015, в 01:54

Источник

Теги:

angularjs

css

1 ответ

Ещё вопросы

ThomasP1988 · Accepted Answer · 2015-06-28T20-17-00.000Z

попробуй так

<body data-ng-controller="HeaderCtrl" data-ng-class="{'bodydark' : bodyClass == 'dark', 'bodywhite' : bodyClass == 'white'}">

Хорошо, я использую bodyClass в контроллере? что-то вроде: $ scope.bodyClass = 'class-here';
да, вы можете назвать его тем классом, который вам нужен, в этом случае, если ваш класс bodytest, вы пишете $ scope.bodyClass = 'test'
Я изменил свой оригинальный пост на то, как я пытался это исправить. Это все еще не работает, хотя ...