Angular UI.Bootstrap الأكورديون و bootstrap3

Question

أنا أدرك جيدًا ذلك ui.bootstrap لم يتم نقله بالكامل بعد على Bootstrap 3 ، لكنني قمت ببناء معظم تطبيقي باستخدامه ، ولا يمكنني ببساطة العودة إلى 2.3 فقط لهذا المكون.

ومع ذلك ، أقوم بتقييم إمكانياتي.

ما جربته حتى الآن:

1. العودة إلى bootstrap 2.3
   كسر كل ما عندي ... بأي حال من الأحوال

2. التمسك بـ BS3 والاستيلاء على الأكورديون من https://github.com/angular-ui/bootstrap/tree/bootstrap3
   لقد حاولت إما تضمين الكود أدناه ui.bootstrap_0.7 lib ، واستبدلت رمز الأكورديون في رمز ui.bootstrap 0.7 وقام بإزالته ووضعه في ملف آخر تمامًا. لم يعمل أي من هذا

3. التزم بـ BS3 وحاول سرقة أنماط الأكورديون من BS2.3
   وبهذه الطريقة تمكنت من إضافة نمط إليه ، لكن سلوك الأكورديون لم يكن يعمل ببساطة

في كل محاولة واحدة ، لا يتم عرض أي خطأ على وحدة التحكم ...

أنا أتجول في الظلام ، مع عدم وجود أدنى فكرة عن كيفية تضمين الأكورديون في الكود الخاص بي دون إعادة تنفيذه من جديد.
أي مساعدة ستكون موضع تقدير كبير ، شكرًا!

Answer 1

يستخدم 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>");
}]);

ابحث عن هذه العينة في غطس

Answer 2

عليك أن الرجوع فقط إلى ملف "ui-bootstrap-tpls.js"

كانت هذه حالتي على الأقل ، كنت أشير إلى كلاهما في هذا الترتيب:

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

وكان "U-bootstrap" يتجاوز القوالب

Answer 3

تعمل الإجابات MLIM1972 بشكل جيد ، ومع ذلك استخدمت الزخرفة الزخرفية الزخرفية للقيام بذلك (في Coffescript):

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