Question

我下载了angularjs UI Bootstrap手风琴指令：UI Bootstrap

但是，我无法让它工作，<accordion>标记会产生错误。我在我的角度模块中包含了['ui.bootstrap']依赖项，并且我直接在页面上放置了对文件的引用。谁能告诉我我错过了什么？

这是我的模块：

var myApp = angular.module("dashboardManagement", ['ui.bootstrap'])

以下是我的观点：

  @section scripts{
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-animate.js"></script>
    <script src="~/Scripts/app/app.js"></script>
    <script src="~/Scripts/app/Contractor/contractorController.js"></script>
    <script src="~/Scripts/app/Contractor/contractorService.js"></script>
    <script src="~/Scripts/ui-bootstrap-custom-tpls-0.13.3.js"></script>
    <script src="~/Scripts/app/Test/AccordionDemoCtrl.js"></script>

}
<h2>Index</h2>

<div ng-app="dashboardManagement">

    <div>
        <div>
            <div ng-controller="AccordionDemoCtrl">
                <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>
                <accordion close-others="oneAtATime">
                    <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
                        This content is straight in the template.
                    </accordion-group>
                    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
                        {{group.content}}
                    </accordion-group>
                    <accordion-group heading="Dynamic Body Content">
                        <p>The body of the 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>
                    </accordion-group>
                    <accordion-group is-open="status.open">
                        <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>
                        </accordion-heading>
                        This is just some content to illustrate fancy headings.
                    </accordion-group>
                </accordion>
            </div>
        </div>
`

Answer 1

我可以在这里看到几个不同的问题。首先，您要包含这些资源的缩小版和非缩小版，因此您将使用相同的代码两次。因此，请确保只包含<script src="~/Scripts/ui-bootstrap-custom-tpls-0.13.3.js"></script>并删除其他三个类似的重叠脚本。你是否也将Angular包含在这些脚本之上？因为这是一个依赖项，如果不包含在

之前就会抛出错误

第二，提供的示例代码是您实际使用的内容吗？因为当然只有这个：

<accordion>

</accordion>

不会做太多。您必须为此指令提供内容，例如：

<accordion>
  <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
    {{group.content}}
  </accordion-group>
</accordion>

查看plnkr演示以获取完整的工作示例代码： http://plnkr.co/edit/MlcqWL?p=preview

Answer 2

我发现Accordion功能没有按预期工作，因为我的_Layout.cshtml中有一个导航侧边栏。如果我注释掉导航栏，手风琴按预期工作。我计划就发现的问题发布一个“新”问题。

UI-Bootstrap手风琴指令不起作用

2 个答案: