Как менять стили с помощью Angular.js?

Question

[slip31]

Попытаюсь объяснить задачу.
Есть две страницы - главная (home) и внутренняя (dashboard). Главная full-width, а на внутренней необходимо сделать sticky sidebar.
Пример вот

На странице dashboard используется деление

<div id="sidebar-wrapper">
    
    
        <ul class="sidebar-nav">
            <li class="sidebar-brand"><a href="#">Home</a></li>
            <li><a href="#">Another link</a></li>
            <li><a href="#">Next link</a></li>
            <li><a href="#">Last link</a></li>
        </ul>
    </div>
    <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>Simple Sidebar</h1>
                        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
                        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
                        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                    </div>
                </div>
            </div>
        </div>

Но для того, чтобы page-content-wrapper не залезал на всю область - необходимо добавить в стили

#wrapper {	
padding-left: 250px;
  }

Как я могу добавить это средствами angular? ngStyle в sidebar-nav?

Answer 1

[Владислав Козуля]

Добавляем в $rootScope булевую переменную, которую на внутренних страницах будем менять на true. Для необходимых элементов добавляем ng-class, зависящий от данного значения. Как раз он и будет добавлять класс (для таких вещей не надо использовать id).

Далее прописываем в css стиль с отступом, радуемся.

Answer 2

[Mikhail Osher]

Добавляйте в body некий класс, который пометит состояние, и от него пляшите.

body.withAside #wrapper {
    padding-left: 250px;
}