UI-引导手风琴指令不工作 [英] UI-Bootstrap Accordion Directive not working

问题描述

我下载了 angularjs UI引导手风琴指令这里找到： UI引导

不过，我无法得到它的工作和＆LT;手风琴与GT; 标记生成错误。我包括在我的角度模块['ui.bootstrap'] 的依赖，我把引用文件，网页上直接。谁能告诉我，我缺少的是什么？

下面是我的模块：

  VAR对myApp = angular.module（dashboardManagement，['ui.bootstrap']）
 

下面是我的看法：

  @section脚本{
    ＆LT;脚本SRC =〜/脚本/ angular.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =〜/脚本/角animate.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =〜/脚本/应用/ app.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =〜/脚本/应用/承包商/ contractorController.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =〜/脚本/应用/承包商/ contractorService.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =〜/脚本/ UI，引导定制，第三方物流企业，0.13.3.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =〜/脚本/应用/测试/ AccordionDemoCtrl.js＆GT;＆LT; / SCRIPT＆GT;}
＆LT; H2＆GT;指数＆LT; / H＆GT;＆LT; D​​IV NG-应用=dashboardManagement＆GT;    ＆LT; D​​IV＆GT;
        ＆LT; D​​IV＆GT;
            ＆LT; D​​IV NG控制器=AccordionDemoCtrl＆GT;
                ＆所述p为H.;
                    ＆LT;按钮式=按钮级=BTN BTN-默认BTN-SMNG点击=status.open = status.open！＆GT;最后切换面板＆LT; /按钮＆GT;
                    ＆LT;按钮式=按钮级=BTN BTN-默认BTN-SMNG点击=status.isFirstDisabled = status.isFirstDisabled！＆GT;启用/禁用第一个面板和LT; /按钮＆GT;
                ＆所述; / P＆GT;
                ＆LT; D​​IV CLASS =复选框＆GT;
                    ＆LT;标签＆gt;
                        ＆LT;输入类型=复选框NG模型=oneAtATime＆GT;
                        打开在同一时间只有一个
                    ＆LT; /标签＆gt;
                ＆LT; / DIV＆GT;
                ＆LT;手风琴近他人=oneAtATime＆GT;
                    ＆LT;手风琴组标题=静态头，开始扩大是开=status.isFirstOpen是禁用=status.isFirstDisabled＆GT;
                        此内容是直的模板。
                    ＆LT; /手风琴组＆gt;
                    ＆LT;手风琴组标题={{group.title}}NG重复=组群＆GT;
                        {{group.content}}
                    ＆LT; /手风琴组＆gt;
                    ＆LT;手风琴组标题=动态正文内容＆GT;
                        ＆所述; P＆gt;将手风琴组的主体生长至适合的内容与所述; / P＆GT;
                        ＆LT;按钮式=按钮级=BTN BTN-默认BTN-SMNG点击=的addItem（）＆gt;添加项目＆lt; /按钮＆GT;
                        ＆LT; D​​IV NG重复=项中的项目＆GT; {{}项}＆LT; / DIV＆GT;
                    ＆LT; /手风琴组＆gt;
                    ＆LT;手风琴组开=status.open＆GT;
                        ＆LT;手风琴标题＆GT;
                            我可以有标记，太！ ＆LT; I类=右拉glyphiconNG-CLASS ={'glyphicon雪佛龙下：status.open，glyphicon  - 雪佛龙权！status.open}＆GT;＆LT; / I＆GT;
                        ＆LT; /手风琴标题＆GT;
                        这仅仅是一些内容来说明花哨的标题。
                    ＆LT; /手风琴组＆gt;
                ＆LT; /手风琴与GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
`
 

解决方案

我发现的是，如预期，因为我_Layout.cshtml中有一个导航，侧边栏手风琴功能不能正常工作。如果我注释掉的导航栏，手风琴按预期工作。我打算张贴有关问题找到一个新的问题。

I downloaded the angularjs UI Bootstrap accordion directive found here: UI Bootstrap

However, I cannot get it to work and the <accordion> tag generates errors. I included the ['ui.bootstrap'] dependency in my angular module and I put references to files directly on page. Can anyone tell me what I am missing?

Here is my module:

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

Here is my view:

  @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>
`

解决方案

What I discovered is that the Accordion feature is not working as expected because my _Layout.cshtml has a nav-sidebar in it. If I comment out the navbar, the Accordion works as expected. I plan to post a "new" question regarding the found issue.

这篇关于UI-引导手风琴指令不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！