2016-08-01 16 views
1

ich installiert habe, richtig, die folgende:UIB-Dropdown funktioniert nicht in Körper von HTML-View

"ui-bootstrap": "0.12.2", "ngAnimate": "1.5.5", "AngularJs": "1.5.5

Wenn ein Dropdown-Menü in dem Body-Tag meiner HTML-Ansicht zu schaffen, ich bin nicht empfangen irgendwelche sichtbaren Ergebnisse. Ich erhalte keine Fehlermeldungen sowohl in der Konsole als auch im Netzwerkanalysator. Auch alle anderen angularJS und Code arbeiten perfekt in der Ansicht, so dass nichts falsch mit externen Setup ist. Hier ist der HTML-Code in Frage:

<div class="btn-group" uib-dropdown dropdown-append-to-body> 
    <button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle> 
    DropDown <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body"> 
    <li role="menuitem"><a href="#">Action</a></li> 
    <li role="menuitem"><a href="#">Another action</a></li> 
    <li role="menuitem"><a href="#">Something else here</a></li> 
    <li class="divider"></li> 
    <li role="menuitem"><a href="#">Separated link</a></li> 
    </ul> 
</div> 

Und hier ist JS in Frage:

var myApp = angular.module('app', ['ui.bootstrap','ngAnimate']); 
myApp.controller('Controller', ['$scope', '$http', '$log', function($scope, $http, $log) { 

$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; 
}; 

$scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content')); 
}]); 

Antwort

1

Ab ui-Bootstrap 0.14.0, benötigen sie den uib- Präfix für ihre Richtlinien. Es sieht so aus, als ob Sie eine frühere Version verwenden, daher sollten Sie die Anweisung anzeigen lassen, indem Sie das Präfix uib entfernen. Mit anderen Worten, "uib-dropdown-menu" wird zu "dropdown-menu" etc.

Entweder das, oder benutzen Sie die neueste Version von ui-bootstrap.

Quelle: bootstrap migration guide for prefixes