Accordian UI.bootstrap angular不会出现在项目中

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:

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

1 个解决方案

#1

Change your module declaration to inject bootstrap:

更改模块声明以注入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.

但是你的控制台错误指向其他控制器,而不是你问题中的控制器,所以要么在这里添加它,要么从你的应用程序中删除它,在那里测试你的问题中的代码。

#1