Изменение элемента при изменении классов другого

@SPNick · Регистрация: 21.07.2015

Студворк — интернет-сервис помощи студентам

Товарищи, добрый день.

Пните пожалуйста, никак не могу сделать первый шаг в Ангуляре.
Задача проста. Есть ASP.Net приложение использующее вкладки (tabs) Bootstrap.
При переходе между вкладками я хочу реализовать автоматическое изменение заголовка страницы.

Подгрузил саму библиотеку, прописал ng-app и ng-controller. Вижу, что Ангуляр прицепился, в этом сомнений нет.
Далее начинаю писать код.. и ничего не получается

Для начала понять бы как правильно следить за значениями переменных.
Чтобы при переходе между вкладками выпрыгивал алерт.

Сейчас он показывается один раз, при первичной загрузке страницы. И всё ((

Начало около того:

JavaScript
1
2
3
4
5
6
7
8
9
10
var angularMLP = angular.module("angularMLP", [])
    .controller("mainController", ['$scope', function ($scope) {
        $scope.formTabStatus = $scope.castTabStatus = null;
 
        $scope.formTabStatus = $("#formTabID").hasClass("active");
        $scope.castTabStatus = $("#castTabID").hasClass("active");
 
        $scope.$watchGroup(['formTabStatus', 'castTabStatus'], function () {
            alert('Changed!');
        });

Если кто не знает - у активной вкладки появляется класс "active". У неактивной пропадает.

@ReasonX7 · 15.07.2016, 14:40

Для начала понять бы как правильно следить за значениями переменных.

Следите вы за ними правильно. Они у вас попросту они не меняются.

JavaScript
1
2
3
        
$scope.formTabStatus = $("#formTabID").hasClass("active");
$scope.castTabStatus = $("#castTabID").hasClass("active");

Этот код один раз исполнился и все. Нужно использовать события.

Пример:

HTML5
1
2
3
4
<button ng-click="tab = 'form'">Go to form</button>
<div ng-show="tag === 'form'">Some form here</div>
<button ng-click="tab = 'cast'">Go to cast</button>
<div ng-show="tag === 'cast'">Some cast here</div>

JavaScript
1
2
3
4
5
6
...
$scope.tab = 'form';
$scope.$watch('tab', function() {
  alert('Changed');
});
...

Если использовать `angular-bootstrap`, у него есть директива `uib-tabset` (http://plnkr.co/edit/?p=preview). Тогда это будет выглядеть где-то так:

HTML5
1
2
3
4
5
6
7
8
<uib-tabset>
  <uib-tab heading="Form" select="alertMe()">
    Some form here
  </uib-tab>
  <uib-tab heading="Cast" select="alertMe()">
    Some cast here
  </uib-tab>
</uib-tabset>

JavaScript
1
2
3
4
5
...
$scope.alertMe = function() {
  alert('Changed');
};
...

Добавлено через 4 минуты
Еще, при работе с Angular, старайтесь поменьше использовать jQuery. Я его использую только, когда хочу повесить слушатель события на директиву или делаю изменения DOM-дерева, которые не удобно или попросту невозможно сделать через встроенные директивы `ng-show`/`ng-hide` и `ng-if`.

@SPNick · 15.07.2016, 14:53 **[ТС]**

ReasonX7, спасибо большое за развернутый ответ. Прояснилось.

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

@SPNick 33 / 26 / 19 Регистрация: 21.07.2015 Сообщений: 300
	15.07.2016, 14:53 [ТС]
	ReasonX7, спасибо большое за развернутый ответ. Прояснилось. 0