Split-Taste schaltet nicht um Angular, JS

Question

Ich habe einige ähnliche Fragen zu diesem Thema, aber ich bin nicht auf eine Antwort, die helfen würde. Kann mir bitte jemand meinen Code ansehen?

Ich habe {{$ ctrl.init}} und {{$ ctrl.people}} in der Komponente zugewiesen. Ich weiß, dass diese Zuweisung funktioniert, denn wenn ich den "Split-Button" wegnehme und sie direkt auf der Vorlage drucke, kann ich auf sie klicken und sie normal umleiten, ohne Probleme.

Dies ist der Code in meiner Vorlage:

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-2"> 
    <!--Sidebar content--> 
     <div class="btn-group btn-xs" uib-dropdown ng-cloak> 
     <button id="mydd" type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown" aria-haspopup="true">Action 
      <span class="caret"></span></button> 
      <ul class="dropdown-menu" role="menu" aria-labelledby="mydd"> 
       <li><a href="{{$ctrl.init}}">Start</a></li> 
       <li><a href="{{$ctrl.people}}">People</a></li> 
      </ul> 
     </div> 
    </div> 
    </div> 
</div> 

Wenn ich auf die Schaltfläche hinzufügen, ich habe den richtigen Styling bekommen, aber es nicht nach unten fallen lassen oder mir die Optionen. Es gibt keine Reaktion.

Irgendwelche Gedanken?

Answer 1

Versuchen Sie es.

sollten Sie ui.bootstrap Modul zu Haupt-App hinzufügen.

in Controller definieren $scope.isCollapsed = true; und fügen Sie auch uib-collapse="isCollapsed" Richtlinie ul Tag

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-2"> 
    <!--Sidebar content--> 
    <div class="btn-group btn-xs" uib-dropdown ng-cloak> 
    <button id="mydd" type="button" ng-click="isCollapsed = !isCollapsed" class="btn btn-primary dropdown-toggle  btn-xs" data-toggle="dropdown" aria-haspopup="true">Action 
     <span class="caret"></span></button> 
     <ul class="dropdown-menu" uib-collapse="isCollapsed" role="menu" aria-labelledby="mydd"> 
      <li><a href="{{$ctrl.init}}">Start</a></li> 
      <li><a href="{{$ctrl.people}}">People</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div>