Angular ui.bootstrap 手风琴和 bootstrap3答案

【问题标题】：Angular ui.bootstrap accordion and bootstrap3Angular ui.bootstrap 手风琴和 bootstrap3
【发布时间】：2013-12-19 16:07:37
【问题描述】：

我很清楚 ui.bootstrap 还没有完全移植到 bootstrap 3 上，但我已经使用它构建了我的大部分应用程序，我不能仅仅为了这个组件而回到 2.3。

也就是说，我正在评估我的可能性。

到目前为止我所尝试的：

恢复到 Bootstrap 2.3
打破了我所有的风格......没办法
坚持BS3，从https://github.com/angular-ui/bootstrap/tree/bootstrap3抢手风琴
我要么尝试将代码包含在 ui.bootstrap_0.7 lib 下，要么替换了 ui.bootstrap 0.7 代码中的手风琴代码，然后将其删除并将其完全放在另一个文件中。这些都没有奏效
坚持 BS3 并试图从 BS2.3 中窃取手风琴风格
通过这种方式，我设法为其添加了样式，但手风琴行为根本不起作用

在每次尝试中，控制台上都不会显示错误...

我在黑暗中徘徊，不知道如何在我的代码中包含手风琴而不重新实现它。
任何帮助将不胜感激，谢谢！

【问题讨论】：

为什么不得到 bootstrap3 分支的自定义构建，直到它得到正式支持和发布？所有组件（但进度）都在提到的分支中工作。
@pkozlowski.opensource 实际上，这就是我在第 2 点中尝试过的方法，但都失败了。如果有办法为 bs3 分支创建自定义构建，我没有注意到它。我想我可以创建一个 bs2 自定义构建，然后用 bs3 分支中的一个覆盖所有与手风琴相关的部分......这是你的建议吗？
您可以从 Grunt 创建自定义构建，如下所述：github.com/angular-ui/bootstrap#build。或者只是从默认构建中删除不需要的指令。
@pkozlowski.opensource 太好了，我搞定了。由于我的主机是 KO，我无法在我正在使用 atm 的 windows（叹气）机器上使用 Grunt。我已经构建了一个 Frankestein，覆盖了 collapse、transition 和 accordion 模块，并且可以正常工作，谢谢！

标签： javascript angularjs angular-ui angular-ui-bootstrap

【解决方案1】：

您必须仅引用“ui-bootstrap-tpls.js”文件

至少我的情况是这样，我是按这个顺序引用这两个：

ui-bootstrap-tpls.js
ui-bootstrap.js

并且“ui-bootstrap”覆盖了模板

【讨论】：

【解决方案2】：

mlim1972 答案效果很好，但是我使用 angular $provide 装饰器来做到这一点（在咖啡脚本中）：

module.config( ["$provide", ($provide) ->
  $provide.decorator 'accordionDirective', ["$delegate", ($delegate) ->
  $delegate[0].templateUrl = "path/to/modified/accordion-group.html"
  $delegate
]

【讨论】：

【解决方案3】：

Bootstrap 3 使用面板而不是手风琴类。模板应该为此而改变。为了不更改 ui-bootstrap，我覆盖了具有手风琴模板的模块。这个模块应该被添加到你的 js 类中（并且应该在 ui-bootstrap 之后加载）：

angular.module("template/accordion/accordion-group.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/accordion/accordion-group.html",
    "<div class=\"panel panel-default\">\n" +
    "  <div class=\"panel-heading\" >\n" +
    "    <h4 class=\"panel-title\"><a data-toggle=\"collapse\" ng-click=\"isOpen = !isOpen\" accordion-transclude=\"heading\">{{heading}}</a></h4>\n" +
    "  </div>\n" +
    "  <div class=\"panel-collapse\" ng-hide=\"!isOpen\">\n" +
    "    <div class=\"panel-body\" ng-transclude></div>  </div>\n" +
    "</div>");
}]);

angular.module("template/accordion/accordion.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/accordion/accordion.html",
    "<div class=\"panel-group\" ng-transclude></div>");
}]);

在plunk中查找此示例

【讨论】：

是的，我以几乎相同的方式解决了它。只有我也覆盖了逻辑……但不确定是否需要。