3

Does anyone have a good example of an Angular JS implementation (directive) of Accordian in conjunction with Bootstrap?

There are a few examples out there, none of which work very well...

https://github.com/angular-ui/bootstrap/tree/master/src/accordion

https://github.com/ganarajpr/Angular-UI-Components

Robert Christian
  • 18,218
  • 20
  • 74
  • 89
  • 3
    Could you elaborate on what you are missing from those directives? I'm especially interested in feedback on http://angular-ui.github.com/bootstrap/#/accordion – pkozlowski.opensource Jan 11 '13 at 20:21
  • @pkozlowski.opensource - *semi-related:* about a month or two ago I went to use the popover functionality from the [old project](https://github.com/ajoslin/angular-bootstrap-ui) and could not for the life of me get it to work. I was in a hurry, so I just rolled my own and moved on... Now I feel bad like I should've reported it, but like I said, time was a factor. I'm interested in what you were saying too, specifically because of that bug I encountered. – Ben Lesh Jan 11 '13 at 21:07
  • Ah, forgot about that one. That one (a) does not exemplify more than one content within a section, but more importantly (b) causes error: TypeError: Cannot read property '$$childHead' of null with http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js (described here - https://github.com/angular/angular.js/issues/1627). I am running it within a partial. – Robert Christian Jan 11 '13 at 21:09
  • 1
    It actually loads and works without error, then the error is thrown on the next (and every subsequent) view transition (route call). – Robert Christian Jan 11 '13 at 21:11
  • 1
    @blesh - you should feel bad :-) But now you've got a chance to do better - just contribute to the project :-) – pkozlowski.opensource Jan 11 '13 at 21:12
  • 1
    @rob - you are hitting a bug in Angular 1.0.3 - it was fixed in master but we need to wait for a new release :-( It was fixed in this PR https://github.com/angular/angular.js/commit/d6da505f4e044f8a487ac27a3ec707c11853ee0a so you can either monkey-patch AngularJS or take the latest snapshot from http://code.angularjs.org/snapshot/. For (a) I'm not sure what you mean... Would be happy to add / extend whatever is needed but not sure what is missing here... If you could start a discussion on the angular-ui mailing list it would be great. – pkozlowski.opensource Jan 11 '13 at 21:16
  • 1
    @pkozlowski.opensource - thank you, I grabbed http://code.angularjs.org/snapshot/angular.min.js and not only did it fix the issue, but angular appears to run even faster now! – Robert Christian Jan 11 '13 at 21:35
  • regarding (a), put another way: how would one render html within the accordian? IE this does not work:have more than a single item within a section? The content is displayed as a string. IE this does not render html: $scope.accordian_groups = [ { title: "Section 1", content: '

    foo
    bar

    ' }, { title: "Section 2", content: "B" }, { title: "Section 3", content: "C" } ]; ... so the example as-is is not useful (not obvious how to extend without drilling into the source)     – Robert Christian Jan 11 '13 at 21:39

1 Answers1

5

So, the implementation I would recommend is this one: http://angular-ui.github.com/bootstrap/#/accordion

It comes from the project that aims at rebuilding all the boostrap components as native AngularJS directives (this means no dependency on jQuery and no dependency on bootstrap's JavaScript). On top of it most of the directives have customizable templates which means that people can change directive's look and feel to their liking. For example, here are templates for the accordion: https://github.com/angular-ui/bootstrap/tree/master/template/accordion

Warning: the http://angular-ui.github.com/bootstrap/ requires 1.0.3 of AngularJS but there was a bug in 1.0.3 that was fixed in https://github.com/angular/angular.js/commit/d6da505f4e044f8a487ac27a3ec707c11853ee0a but not yet released. Till 1.0.4 is out you can use the snapshot of the bug-fix release of AngularJS: http://code.angularjs.org/snapshot/

Disclaimer: I'm part of this project so I'm biased "by design".

pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286
  • Perfect, thank you. Regarding my comment earlier (a), I was just asserting that all of the angular-ui/bootstrap examples have a very limited use case in conjunction with ng-repeat since there's no dynamic/styling capability. – Robert Christian Jan 12 '13 at 00:16