角度ui bootstrap不加載

我從示例頁面中獲取所有內容。基本上沒有什麼不同，控制器和HTML的身體是由手風琴例如單純複製粘貼從 https://angular-ui.github.io/bootstrap/角度ui bootstrap不加載

我什麼都試過....

screen shot 2015-10-14 at 21 53 02

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

```

補充我添加我的鮑爾依賴：

"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" 
    }

來源

2015-10-14 David F.

在bower.json，更新angular-bootstrap到最新：0.14.2截至今日。

您的示例不起作用，因爲您從文檔粘貼了代碼：此代碼對於0.14.x有效，但您仍在0.13.x中。

如果你想留在0.13.4版本，你將不得不刪除uib-前綴的指令的名稱，即：

更換uib-accordion與accordion
與accordion-group
更換uib-accordion-group將uib-accordion-heading替換爲accordion-heading

來源

2015-10-14 19:49:50

是的，它是w工作會有！多謝。 –

感謝男人，我一直忘記版本差異... – Tom

不錯的一個是它的工作.. – santoshK

通過檢查元素來檢查控制檯是否有錯誤。這些信息會讓你的問題更容易回答。你也可以嘗試切換最後兩個腳本引用來確保依賴被加載。最後加載UI Bootstrap將是最安全的。

來源

2015-10-14 19:48:48 WesW

角度ui bootstrap不加載

回答

相關問題