Accordian UI.bootstrap角度未显示在项目中

Question

HTML: HTML：

<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">
    <head>
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js">   </script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
        <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
        <script src="example.js"></script>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    </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>
    </body>
</html>

Javascript: Javascript：

angular.module('ui.bootstrap.demo').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
    };
});

These two pieces of code are exactly as taken from their site. 这两段代码与从其站点获取的完全相同。 The library files should already be downloaded from what the other programmer said to me, I'm just wondering if I have these in the right spot and if I am calling them correctly? 库文件应该已经从其他程序员对我说的东西中下载了，我只是想知道我是否在正确的位置，以及我是否正确调用了它们？

SCREENSHOT 屏幕截图

Answer 1

Change your module declaration to inject bootstrap: 更改模块声明以注入引导程序：

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

Here is a working version. 这是一个工作版本。

But your console error is pointing to other controller, not the one in your question, so either add it here, or remove it from your app where you test the code from your question. 但是您的控制台错误指向的是其他控制器，而不是问题中的那个控制器，因此可以在此处添加它，或者将其从测试问题代码的应用程序中删除。

Accordian UI.bootstrap角度未显示在项目中

问题描述

1 个解决方案

解决方案1
0 2015-11-13 16:07:17

Accordian UI.bootstrap角度未显示在项目中

问题描述

1 个解决方案

解决方案1 0 2015-11-13 16:07:17

解决方案1
0 2015-11-13 16:07:17