Коллапс ui-bootstrap не работает с Angular

У меня есть угловой модуль и конфигурация:

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

Мои html-файлы с использованием индекса и частичного файла:

индекс.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>

частичный/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>

Кнопка и курсор отображаются, а раскрывающийся список изначально закрыт и не открывается при нажатии. Есть идеи, что мне не хватает?


angularjs angular-ui-bootstrap
person bmw0128    schedule 26.07.2014    source источник
comment
Я в замешательстве. Заголовок вопроса касается директивы сворачивания ui-bootstrap, но я не вижу, чтобы вы использовали ее где-либо в своем коде. Функциональность, о которой вы, кажется, спрашиваете, представляет собой раскрывающийся список стандартной начальной загрузки (не ui-bootstrap). Что вы ожидаете увидеть и как это связано с ui-bootstrap?   -  person jdmcnair    schedule 27.07.2014

Ответы (3)


arrow_upward
1
arrow_downward

Вы загружаете bootstrap.js, у которого есть связанное событие, чтобы закрыть/открыть коллапс. Таким образом, и директива angular-ui-bootstrap, и bootstrap.js пытаются закрыть/открыть коллапс. Удалите ссылку на скрипт файла bootstrap.js и посмотрите, решит ли это вашу проблему. В документации angular-ui-bootstrap не рекомендуется загружать библиотеку bootstrap.js.

person Rob J    schedule 27.07.2014

arrow_upward
0
arrow_downward

Вот пример из 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>

Видите ли, вы не использовали директиву. Итак, ваш частичный должен быть таким:

<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>
person s.alem    schedule 17.09.2014

arrow_upward
0
arrow_downward

см. рабочий пример здесь http://plnkr.co/edit/aM9G0EgL6IcoBED2WOtx?p=preview

обновите файл entry.html до (вы пропустили dropdown в <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>
person sylwester    schedule 17.09.2014