angular ui Bootstrap lädt nicht

Ich nehme alles von der Beispielseite. im Grunde gibt es nichts anderes, Controller und html Körper ist reines Kopieren und Einfügen von Akkordeon Beispiel aus https://angular-ui.github.io/bootstrap/angular ui Bootstrap lädt nicht

ich alles versucht ....

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>

`` `

in Ergänzung füge ich meine Bower-Abhängigkeit hinzu:

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

Quelle

2015-10-14 David F.

In bower.json, Update angular-bootstrap auf den neuesten Stand: 0.14.2 ab heute.

Ihr Beispiel funktioniert nicht, weil Sie den Code aus der Dokumentation eingefügt eingefügt: dieser Code ist gültig für 0.14.x, aber Sie sind immer noch in 0.13.x.

Wenn Sie mit Version 0.13.4 bleiben wollen, werden Sie den uib- Präfix im Namen der Richtlinien entfernen müssen, das heißt:

ersetzen uib-accordion mit accordion
ersetzen uib-accordion-group mit accordion-group
Ersetzen Sie uib-accordion-heading durch accordion-heading

Quelle

2015-10-14 19:49:50

Ja, es ist w orking! vielen Dank. –

danke mann, ich vergesse immer wieder die Versionsunterschiede ... – Tom

Schön, ja, es funktioniert .. – santoshK

Überprüfen Sie Ihre Konsole auf einen Fehler, indem Sie das Element untersuchen. Diese Information wird Ihre Frage leichter beantworten. Sie könnten auch versuchen, die letzten beiden Skriptverweise zu wechseln, um sicherzustellen, dass Abhängigkeiten geladen sind. Loading UI Bootstrap last wäre am sichersten.

Quelle

2015-10-14 19:48:48 WesW

angular ui Bootstrap lädt nicht

Antwort

Verwandte Themen