Question

我有一个角度模块和配置：

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

我的html文件，使用索引和部分文件：

的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>

部分/ 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>

显示按钮和插入符号，最初关闭下拉列表，单击时不会打开。知道我错过了什么吗？

Answer 1

您正在加载具有绑定事件的bootstrap.js以关闭/打开折叠。因此，angular-ui-bootstrap指令和bootstrap.js都试图关闭/打开崩溃。删除bootstrap.js文件脚本引用，看看是否可以解决您的问题。 angular-ui-bootstrap文档建议不要加载bootstrap.js库。

Answer 2

以下是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>

Answer 3

请在此处查看工作示例http://plnkr.co/edit/aM9G0EgL6IcoBED2WOtx?p=preview

将您的entry.html更新为（{1}}中的dropdown

<div class="button...

ui-bootstrap崩溃无法使用Angular

3 个答案: