Die Anwendung Angular Bootstrap-Dropdown-Beispiel
Möchte ich drop-down-Menüs in meinem Projekt und ich habe den code aus dem Beispiel. Die drop-down angezeigt wird, wie in dem Beispiel, aber wenn ich klicke es passiert nichts.
<form class="form" name="form" novalidate>
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button"
class="btn btn-primary dropdown-toggle"
dropdown-toggle
ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div>
</form>
Nun der controller für diese html:
angular.module('startupApp').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
});
Die Bootstrap/AngularJS-integration lib benutzt du?
Ich bin mit Angular-Fullstack. Im client gibt es einen Ordner bower_components mit einem Winkel-bootsrap-Ordner mit einem ui-bootstrap.js Datei, die klingt wie die, die in der demo-code. Das Beispiel ist hier zu finden: angular-ui.github.io/bootstrap
Ja, was ist das problem? Ich meine, das ist der rechts-Bibliothek rechts?
Kein problem. Hinzugefügt relevante tags entsprechend.
Warum dann nicht die dropdown funktioniert?
Ich bin mit Angular-Fullstack. Im client gibt es einen Ordner bower_components mit einem Winkel-bootsrap-Ordner mit einem ui-bootstrap.js Datei, die klingt wie die, die in der demo-code. Das Beispiel ist hier zu finden: angular-ui.github.io/bootstrap
Ja, was ist das problem? Ich meine, das ist der rechts-Bibliothek rechts?
Kein problem. Hinzugefügt relevante tags entsprechend.
Warum dann nicht die dropdown funktioniert?
InformationsquelleAutor rashadb | 2014-12-20
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich hatte das gleiche problem und ich lösen durch das löschen der Zeile dropdown-toggle
Ich weiß nicht, was das problem ist, aber es funktioniert gut auf diese Weise
Hier was ich gemacht habe:
Diese si-das original-Beispiel:
- und das ist der code ohne dropdown-toggle
Edit:
Funktioniert das obige Beispiel, wenn Sie mit angular-ui-bootstrap - Version: 0.10.0
Nun, ich habe mich verändert die ui-bootstrap mit diesem
Nun alle arbeiten wie ein Charme
Für mich war die Lösung, genau das Gegenteil: ich muss sicherstellen, dass der button hat die
dropdown-toggle
- Attribut, und die Elterndiv
diedropdown
Attribut, oder aber die Taste hat keinerlei Auswirkung.das Gegenteil von dem, das funktioniert für version 0.12.0
InformationsquelleAutor Jorge Casariego
Gibt es ein paar Probleme in deinem code:
Dein HTML ist nicht Valide, das Letzte
<div>
tag nicht da sein sollteHast du keine Referenz
ui.bootstrap
als Modul-AbhängigkeitHast du die richtigen Dateien ?
Brauchen Sie nicht, nichts besonderes an dem controller, der
dropdown
unddropdown-toggle
Richtlinien sind autark.JsFiddle Demo
Na dann versuchen zu reproduzieren es in ein JsFiddle oder ich nicht in der Lage sein zu helfen, viel mehr.
InformationsquelleAutor Florian F.
Nach viel Kampf habe ich nur die Antwort gefunden, dass funktionierte für meinen Fall. Ich brauchte nur hinzufügen-parse-Winkel zu meinem eckigen.module('myapp'['parse-Winkel']).
InformationsquelleAutor rashadb
Zuerst möchte ich sagen danke an Jorge Casariego für seine Antwort. Seine Antwort half mir sehr viel weiter.
Gab es ein problem am Ende aber, dass weder
$scope.toggled = function(open) {...}
noch$scope.toggleDropdown = function($event) {...}
wo die aufgerufen wird, wenn jemand zu-sammen mit der Dropdown - ( siehe Beispiel hier ). Nach einem Blick in die ui-bootstrap-tpls-0.10.0.js code, den ich hatte, um weiter anpassen, die html-code:dropdown
sollte ein Klasse-Wert nicht ein Attribut selbst.is-open=...
ist nicht erforderlich, ui-bootstrap wird sich darum kümmernng-click
zu den<a>
element in der Liste.Funktionierte dies nicht für mich (
dropdown
als Attribut):Aber das hat (hinzufügen
dropdown
als ein Klasse Wert):Den rest meines Angular App so Aussehen, dann:
Ich weiß, es gibt neuere Versionen verfügbar angular-ui-bootstrap, aber für das Protokoll, ich habe es hier. Es funktioniert mit der version 0.10.0.
InformationsquelleAutor natterstefan