AngularJS-UI 手风琴指令不适用于 ng-view [英] AngularJS-UI accordion directive not working with ng-view

问题描述

我正在尝试将 Angular-ui bootstrap 手风琴集成到我的应用程序中.如果我把它放在没有 ng-view 的情况下它工作正常但是如果我把手风琴放在其他一些 html 文件中并通过 ng-route 提供程序加载 ng-view 手风琴无法工作

I am trying to integrate Angular-ui bootstrap accordion in my application. It works fine if I put it without ng-view but if I put the accordion in some other html file and loads with ng-view via ng-route provider the accordion fails to work

我参考了此链接，但对我的解决方案没有帮助带有引导程序 3 手风琴的 AngularJS通过 ng-view 包含

I referred this link but no help for me with this solution AngularJS with bootstrap 3 accordion not working when included via ng-view

这是plunker链接.如果有人可以修复这个 plunker?

Here is the plunker link. If anyone can give a fix on this plunker?

http://plnkr.co/edit/KGwuqDIb7I5NrYCtPOPk?p=preview

谢谢

推荐答案

事实上，您推荐的答案中给出的答案是正确的.这仅与模板中的 A 标记有关，该标记具有您不想触发的默认操作.

In fact the given answers in your reffered answer are right. This is simply related to the A tag in your template which has a default action you don't want to fire.

像这样更改您的模板:

template:
    '<div class="panel panel-default">'+
    '   <div class="panel-heading">'+
    '       <h4 class="panel-title"><span  data-toggle="collapse" class="accordion-toggle">{{title}}</span></h4>'+
    '   </div>'+
    '   <div class="panel-collapse collapse">'+
    '       <div class="panel-body" ng-transclude>'+
    '       </div>'+
    '   </div>'+
    '</div>',

并使用跨度、标签或按钮代替 A.一切正常.

and use a span, a label or a button instead of an A. An everything works.

看到这个分叉的Plunker.

您现在可以使用一些额外的 css 来实现一些悬停效果.

You cann now use some additional css to achieve some hover effect.

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