AngularJS с бутстрапом 3 аккордеона не работает при включении через ng-view
Проблема заключается в следующем: как только я использую аккордеон в представлении, которое загружается в директиве ng-view, клики названия аккордеона не работают корректно больше
http://plnkr.co/edit/KGwuqDIb7I5NrYCtPOPk?p=preview
Если аккордеон используется на самой странице без ng-view, аккордеон отлично работает
http://plnkr.co/edit/8dY7JU1kxjZ2jAKmMIrP?p=preview
Любая подсказка к тому, что Im отсутствует?
Ответы
Ответ 1
Проблема заключается в том, что Bootstrap добавляет #according_name
в тег a
. Это запускает маршрутизацию AngularJS и из-за изменения маршрута test.html
загружается снова при каждом нажатии на аккордеонную ссылку.
Ваши параметры должны попытаться настроить $locationProvider
на использование режима HTML5 с hashbag, если он работает
$locationProvider.html5Mode(true).hashPrefix('!');
См. документацию здесь
Другим было бы использовать компонент angular-ui, но он не был перенесен на поддержку версии 3 загрузочного файла.
Ответ 2
На самом деле может быть более простое решение.
Вы можете просто убедиться, что ссылки не распространяют изменение URL.
Добавить в тег a
onclick="return false;"
Ответ 3
Вы можете очистить href=""
и использовать
data-target="#collapse"
, это сработало для меня
i.e
<a data-toggle="collapse" data-parent="#accordion" href=""
data-target="#collapse1">Collapsible Group 1</a>
Ответ 4
У меня возникла проблема с использованием href и target-данных вместе, поэтому, если вы используете это в приложении, я бы рекомендовал указать один или другой, но не оба.
Когда я использовал оба варианта, я бы перенаправился на мою страницу входа, как только я нажал на нее. С одним или другим указанным он работал нормально, но не с обоими.