угловой 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
Заменить uib-accordion-group с accordion-group
Заменить uib-accordion-heading на accordion-heading

источник

2015-10-14 19:49:50

Да, это w orking! большое спасибо. –

спасибо человеку, я все время забываю о различиях в версии ... – Tom

Nice one yes its working .. – santoshK

Проверьте свою консоль на предмет ошибки, проверив элемент. Эта информация сделает ваш вопрос более легким для ответа. Также вы можете попробовать переключить последние две ссылки на скрипт, чтобы убедиться, что загружены зависимости. Загрузка UI Bootstrap в последний раз была бы безопаснее.

источник

2015-10-14 19:48:48 WesW

угловой ui bootstrap не загружается

ответ

Смежные вопросы