Обновленный скрипт

Атрибут is-open в директиве аккордеонной группы UI Bootstrap указывает на связываемое выражение. Выражение должно быть логическим, которое разрешает либо true, либо false. Если значение истинно, группа аккордеона открывается.

Атрибут is-open является двусторонней привязкой, что означает, что всякий раз, когда изменяется свойство родительской области видимости, также изменяется соответствующее изолированное свойство области действия гармонической группы, и наоборот. В результате вы можете использовать его для контроля открытия или закрытия аккордеона с помощью функции $watch.

Итак, чтобы сделать вашу демонстрационную работу Fiddle, вам нужно сделать пару вещей:

1. Привяжите атрибут is-open к свойству scope в вашем контроллере.
2. Убедитесь, что свойство scope имеет значение true или false.
3. Создайте $ watch() для свойства scope.

Привязка атрибута is-open к свойству scope в контроллере проста. В этом случае я просто создал $ scope.status как объект с одним свойством open и дал ему значение false. Это значение будет только начальным значением, так что аккордеон будет закрыт при первом запуске вашей демонстрации. Важно то, что статус должен быть объектом, потому что это работает как двусторонняя привязка. Если вы $scope.status = true статус строке (например, $scope.status = true), а в вашей разметке будет открыто состояние (т. $scope.status = true is-open="status"), оно будет только односвязным. В этом случае он инициализирует аккордеонную группу как открытую, но не будет обновлять область, когда вы нажимаете на элемент, чтобы открыть и закрыть его.

Итак, ваш контроллер для этой части, вы бы:

$scope.status = {
    open: false
};

и в вашей разметке вы получите:

<accordion-group heading="Accordion 2" is-open="status.open">
    Accordian 2 content.
</accordion-group>

Теперь последняя часть - функция $ watch. Функция $ watch имеет пару ключевых частей. Во-первых, вы должны сказать ему, что смотреть, поэтому в этом случае вы должны перейти в status.open. Это предмет, который мы хотим отслеживать, и видеть, меняется ли он. Далее, есть функция слушателя.

Есть два значения, которые всегда передаются функции слушателя. Первое - это новое значение того, что вы смотрите. Вторая - это старая ценность того, что вы смотрите. Порядок этих аргументов здесь имеет значение. Независимо от того, что вы называете это, первое значение всегда будет новым значением. Итак, теперь эта функция $ watch должна иметь смысл:

$scope.$watch('status.open', function(newval, oldval){
    if(oldval !== newval) {
        var state = newval ? 'opening' : 'closing';
        alert('Accordion 2 is '+state);
    }
});

В выражении if я проверяю, действительно ли значение status.open изменилось, сравнив старое значение с новым значением. Если старые и новые значения не совпадают друг с другом, тогда вы можете сделать свое дело. В этом случае я создал переменную с именем state и использовал трехмерный оператор для проверки нового значения, если он true, я устанавливаю значение состояния в "открытие", а если нет, он устанавливает значение "закрытие". Затем я просто вызываю предупреждение.

Это уже слишком долго, поэтому я просто упомянул, что есть третье значение в функции $ watch, которая является равенством объекта. У Бен Наделя есть большой (короткий) небольшой экспериментальный видеоролик, в котором объясняется, как и когда вы используете равенство объектов. Я также создал этот Plunker для вас, который показывает, как использовать такую глубокую проверку значений динамически созданных аккордеонных групп.

Надеюсь, это поможет решить вашу задачу.