CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
bmw0128
bmw0128

Reputation: 13698

ui-bootstrap collapse not working with Angular

I have an angular module and config:

var app = angular.module('project', ['ui.bootstrap', 'restangular', 'ngRoute']);
app.config(function($routeProvider, RestangularProvider) {
    $routeProvider.
        when('/', {
            controller:EntryCtrl,
            templateUrl:'frontend/partials/entry.html'
        })....

My html files, using an index and a partial file:

index.html:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>bmwpharm admin</title>

<link rel="stylesheet" href="/frontend/css/style.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">


</head>

<body>
<div ng-app="project">

<div ng-view></div>

</div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-resource.js">     </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.js"></script>
<script src="http://cdn.jsdelivr.net/underscorejs/1.5.1/underscore-min.js"></script>
<script src="http://cdn.jsdelivr.net/restangular/1.1.3/restangular.min.js"></script>
<script type="text/javascript" src="/frontend/app/app.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script type="text/javascript" src="/frontend/js/ui-bootstrap-tpls-0.11.0.min.js"></script>
</html>

partial/entry.html:

<div class="dropdown">
<a class="btn btn-default" data-toggle="dropdown" href="#">Dropdown<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
    <li>hellooooo</li>
</ul>
</div>

The button and caret is displayed, and the dropdown is closed initially, and will not open when clicked. Any idea what I am missing?

Upvotes: 2

Views: 5618

Answers (3)

sylwester
sylwester

Reputation: 16498

please see working example here http://plnkr.co/edit/aM9G0EgL6IcoBED2WOtx?p=preview

update your entry.html to (you've missed dropdown in <div class="button...)

<div class="btn-group" dropdown >
      <a type="button" class="btn btn-default dropdown-toggle" >
        Button dropdown <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu">
         <li><a>helloo</a></li>

      </ul>
    </div>

Upvotes: 0

s.alem
s.alem

Reputation: 13079

Here is an example from angular-ui-bootstrap:

<div class="btn-group" dropdown is-open="status.isopen">
      <button type="button" class="btn btn-primary 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>

You see, you didn't use the directive. So your partial should be like this: 

<div class="btn-group" dropdown>
    <button class="btn btn-default dropdown-toggle" href="#">
      Dropdown <b class="caret"></b>
    </button >
    <ul class="dropdown-menu" role="menu">
        <li><a href="">hellooooo</a></li>
    </ul>
</div>

Upvotes: 0

Rob J
Rob J

Reputation: 6629

You are loading the bootstrap.js that has a bound event to close/open the collapse. So both the angular-ui-bootstrap directive and bootstrap.js are trying to close/open the collapse. Remove the bootstrap.js file script reference and see if that fixes your problem. The angular-ui-bootstrap documentation advises against loading the bootstrap.js library.

Upvotes: 1

Related Questions