Angular UI.Bootstrap Accordion 및 Bootstrap3

Question

잘 알고 있습니다 ui.bootstrap Bootstrap 3에서 아직 완전히 포팅되지는 않았지만 대부분의 앱을 사용하여 구축 했으며이 구성 요소를 위해 2.3으로 돌아갈 수는 없습니다.

즉, 나는 내 가능성을 평가하고 있습니다.

지금까지 시도한 것 :

1. 부트 스트랩 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

부트 스트랩 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

"UI-Bootstrap"은 템플릿을 무시하고있었습니다

Answer 3

MLIM1972 답변은 잘 작동하지만 Angular $를 사용하여 데코레이터를 사용하여 (커피 스크립트로) :

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