angular ui bootstrap doesn't load

问题

I take everything from the example page. basically there is nothing different, controller and html body is pure copy paste from accordion example from https://angular-ui.github.io/bootstrap/

I tried everything....

<!doctype html>
<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>Test</title>

<!-- CSS files -->
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap-theme.min.css">

<!-- JS libs -->
<script src="../../bower_components/angular/angular.min.js"></script>
<script src="../../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>


<!-- Application -->
<script>

var app = angular.module('app',['ui.bootstrap']);


app.controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2'
    }
  ];

  $scope.items = ['Item 1', 'Item 2', 'Item 3'];

  $scope.addItem = function() {
    var newItemNo = $scope.items.length + 1;
    $scope.items.push('Item ' + newItemNo);
  };

  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };
});


    </script>

  </head>

  <body>

<div ng-controller="AccordionDemoCtrl">
  <script type="text/ng-template" id="group-template.html">
    <div class="panel {{panelClass || 'panel-default'}}">
      <div class="panel-heading">
        <h4 class="panel-title" style="color:#fa39c3">
          <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
            ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
        </h4>
      </div>
      <div class="panel-collapse collapse" uib-collapse="!isOpen">
        <div class="panel-body" style="text-align: right" ng-transclude></div>
      </div>
    </div>
  </script>

  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
  </p>

  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="oneAtATime">
      Open only one at a time
    </label>
  </div>
  <uib-accordion close-others="oneAtATime">
    <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      This content is straight in the template.
    </uib-accordion-group>
    <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </uib-accordion-group>
    <uib-accordion-group heading="Dynamic Body Content">
      <p>The body of the uib-accordion group grows to fit the contents</p>
      <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
      <div ng-repeat="item in items">{{item}}</div>
    </uib-accordion-group>
    <uib-accordion-group heading="Custom template" template-url="group-template.html">
      Hello
    </uib-accordion-group>
    <uib-accordion-group heading="Delete account" panel-class="panel-danger">
      <p>Please, to delete your account, click the button below</p>
      <button class="btn btn-danger">Delete</button>
    </uib-accordion-group>
    <uib-accordion-group is-open="status.open">
      <uib-accordion-heading>
        I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </uib-accordion-heading>
      This is just some content to illustrate fancy headings.
    </uib-accordion-group>
  </uib-accordion>
</div>

```

in complement I add my bower dependency:

  "dependencies": {
"angular": "~1.4.6",
"angular-bootstrap": "~0.13.4",
"angular-route": "~1.4.6",
"bootstrap": "~3.3.5",
"jquery": "~2.1.4",
"lodash": "~3.10.1",
"angular-bootstrap-switch": "~0.4.1",
"angularjs-slider": "~0.1.35",
"angular-animate": "~1.4.7",
"angular-ui-notification": "~0.0.14"
  }

回答1:

In bower.json, update angular-bootstrap to the latest: 0.14.2 as of today.

Your example doesn't work because you copy pasted the code from the documentation: this code is valid for 0.14.x but you are still in 0.13.x.

If you want to stay with version 0.13.4, you will have to remove the uib- prefix in the name of the directives, i.e.:

Replace uib-accordion with accordion
Replace uib-accordion-group with accordion-group
Replace uib-accordion-heading with accordion-heading

回答2:

Check your console for an error by inspecting the element. That information will make your question easier to answer. Also you could try switching the last two script references to make sure dependencies are loaded. Loading UI Bootstrap last would be safest.

来源：https://stackoverflow.com/questions/33133929/angular-ui-bootstrap-doesnt-load

标签

angularjs

twitter-bootstrap

angular-ui-bootstrap

ui.bootstrap