Выпадающий бутстраг Angularjs не работает

Немного новый для угловых и бутстрапов.

Я пытаюсь добавить простое раскрывающееся меню. Но он не работает.

Пробовал предложение @Bootstrap 3 простого выпадающего меню. Это также не работает.

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" ui-sref="a">a<span class="caret"></span></a>
<ul class="dropdown-menu">
  <li><a ui-sref="a">a</a></li>
  <li><a ui-sref="b">b</a></li>
  <li><a ui-sref="c">c</a></li>
  <li><a ui-sref="d">d</a></li>
  <li><a ui-sref="e">e</a></li>
  <li><a ui-sref="f">f</a></li>
  <li><a ui-sref="g">g</a></li>
  <li><a ui-sref="h">h</a></li>
  <li><a ui-sref="i">i</a></li>         
  <li><a ui-sref="j">j</a></li>
  <li><a ui-sref="k">k</a></li>
</ul>
</li>

Полный код @http://plnkr.co/edit/uFDFOJfHjL5qY9nVEykq?p=preview

Надеюсь, кто-то поможет мне.

Ответы

Ответ 1

Вам нужно включить модуль ui.bootstrap в ваше приложение.

var app = angular.module('App', ['ui.router','ui.bootstrap']);

а также удалить ui-sref из выпадающего триггера.

<a class="dropdown-toggle" data-toggle="dropdown" >a<span class="caret"></span></a>

Plnkr

Ответ 2

ПРИМЕЧАНИЕ. Большинство ответов здесь устарели! Основная проблема заключается в том, что директива dropdown недоступна как класс больше, но только как атрибут и что она была переименована в uib-dropdown.

Я застрял здесь некоторое время, но изменение класса в атрибут работало как прелесть.

Кроме того, вам нужно использовать префикс 'uib -' для каждой директивы вместо простых имен.

<li uib-dropdown>
    <a uib-dropdown-toggle>a<span class="caret"></span></a>
    <ul uib-dropdown-menu>
        <li><a ui-sref="a">a</a></li>
        <li><a ui-sref="b">b</a></li>
        <li><a ui-sref="c">c</a></li>
        <li><a ui-sref="d">d</a></li>
    </ul>
</li>

(И, конечно же, убедитесь, что вы не забыли включить модуль ui.bootstrap в свое приложение.)

var app = angular.module('App', ['ui.router','ui.bootstrap']);

Ответ 3

data-toggle="dropdown" следует удалить. Я предполагаю, что это создает некоторый конфликт с ui.bootstrap

<li class="dropdown" uib-dropdown>
            <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" uib-dropdown-toggle href="" role="button">
              <span class="glyphicon glyphicon-flag"></span>
              Events
              <span class="caret"></span>
            </a>
            <ul class="uib-dropdown-menu" role="menu">
              <li>
                <a href="">Event 1</a>
              </li>
              <li>
                <a href="">Event 2</a>
              </li>
            </ul>

Надеюсь, что это поможет.

Ответ 4

Вам нужно добавить on-toggle в свой якорный тег, чтобы избежать конфликтов между выпадающим списком выпадающего списка angular, эта проблема закрыта на angular -ui (https://github.com/angular-ui/bootstrap/issues/2156)

Ответ 5

Я нашел отличный ресурс здесь относительно предмета, поскольку у меня была та же проблема. Я опишу, что я сделал ниже.

  • Загрузите ui bootstrap
  • Переместить zipped файл в целевой каталог для приложения и разархивировать
  • найдите последнюю версию выпуска ui bootstrap, которая в моем случае находится на странице "bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js"
  • Включите мини файл js в основной файл .html: <script src='stylesheets/bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js'></script>
  • Вернитесь в Angular директивы и прокрутите вниз до раскрывающегося раздела. Скопируйте их javascript в свои первичные файлы js и html и настройте как обычно.

Что это для меня. Надеюсь, что это поможет кому-то еще с той же проблемой.

Ответ 6

Сначала убедитесь, что вы включили модуль ui.bootstrap в свое приложение

var app = angular.module('App', ['other inclusions','ui.bootstrap']);

Затем, если проблема по-прежнему сохраняется, не используйте выпадающие меню и выпадающие меню в качестве директив. Вместо этого используйте как класс. то есть class= 'dropdown-toggle' и т.д.

Пример:

<div class="dropdown dropdown-append-to-body">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle = "dropdown">Dropdown on Body <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
    </ul>
</div>

Обратите внимание на эту проблему. https://github.com/angular-ui/bootstrap/issues/2156

Ответ 7

Разработано довольно простое решение (после попытки найти его целую вечность) Просто добавьте директиву "выпадающего списка" на кнопку

<button class="btn btn-primary " dropdown-toggle type="button">Drop Me Down<span class="caret"></span></button>

Ответ 8

Ну, я заметил, что атрибут "dropdown" должен быть добавлен в элемент li, как только он будет добавлен, все будет хорошо.

<li class="dropdown" dropdown>
   <a href="#" dropdown-toggle role="button" aria-haspopup="true" aria-expanded="false">... <span class="caret"></span></a>
   <ul class="dropdown-menu">
       ...
   </ul>
</li>