web-dev-qa-db-fra.com

Angularjs bootstrap ne fonctionne pas

Suis un peu nouveau pour angularjs et bootstrap.

J'essaie d'ajouter une simple liste déroulante. Mais ça ne fonctionne pas.

J'ai essayé la suggestion @ la liste déroulante simple Bootstrap 3 ne fonctionne pas . Cela ne fonctionne pas non plus.

<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>

Code complet @ http://plnkr.co/edit/uFDFOJfHjL5qY9nVEykq?p=preview

J'espère que quelqu'un m'aidera.

javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap
33
Silent_Pal

Vous devez inclure ui.bootstrap module dans votre application.

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

et supprimez également ui-sref à partir du déclencheur déroulant.

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

Plnkr

33
PSL

REMARQUE: la plupart des réponses ici sont obsolètes! Le problème principal est que la directive dropdown est plus disponible en tant que classe, mais uniquement en tant qu'attribut, et qu'elle a été renommée en uib-dropdown.

J'étais coincé ici pendant un certain temps, mais changer la classe en attribut fonctionnait comme un charme.

De plus, vous devez utiliser le préfixe 'uib -' pour chaque directive au lieu des noms simples.

<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>

(Et bien sûr, assurez-vous que vous n'avez pas oublié d'inclure le module ui.bootstrap dans votre application.)

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

data-toggle="dropdown" devrais être retiré. Je suppose que cela crée un conflit avec 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>

J'espère que cela t'aides.

8
Akash

Vous devez ajouter on-toggle à votre balise d'ancrage, pour éviter les conflits entre bootstrap dropdown angular dropdown class, ce problème est fermé sur angular-ui ( https://github.com/angular-ui/bootstrap/issues/2156 )

5
madhukar547

J'ai trouvé une excellente ressource de ici concernant le sujet, car j'avais le même problème. Je vais décrire ce que j'ai fait ci-dessous.

  1. Télécharger i bootstrap
  2. Déplacer le fichier compressé vers le répertoire cible de l'application et décompresser
  3. recherchez la dernière édition de la version ui bootstrap, qui dans mon cas, se trouve dans "bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js"
  4. Incluez le fichier js minifié dans votre fichier .html principal: <script src='stylesheets/bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js'></script>
  5. Retournez à Directives angulaires et faites défiler la liste déroulante. Copiez leur javascript dans votre fichier js principal et des échantillons html et personnalisez comme d'habitude

C'est ce qui m'a fait ça. J'espère que cela aide quelqu'un d'autre avec le même problème.

1
Mason

Élaboration d'une solution assez simple (après avoir essayé de la trouver pendant des siècles) Ajoutez simplement la directive "dropdown-toggle" à votre bouton

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

Eh bien, j'ai remarqué que l'attribut "dropdown" doit être ajouté à l'élément li, une fois ajouté, tout ira bien.

<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>
0
Olatunde Garuba

Assurez-vous d'abord que vous avez inclus le module ui.bootstrap dans votre application

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

Ensuite, si le problème persiste, n'utilisez pas la liste déroulante et la liste déroulante comme directives. Utilisez plutôt comme classe. c'est-à-dire class = 'dropdown-toggle' etc.

Par exemple :

<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>

Reportez ce problème. https://github.com/angular-ui/bootstrap/issues/2156

0
dCoder

pour Angular 2:

  1. ajouter npm install ng2-bootstrap --save
  2. puis suivez l'exemple de GITHUB: https://github.com/valor-software/ng2-bootstrap/tree/development/demo/components/dropdown
0
arn-arn