Load from $http.get on accordion-group open using AngularJS

Question

I'm using Angular v1.2.0rc1 and Angular-UI Bootstrap.

[edit] What I want is a load-on-demand with cache while using an accordeon.

I'm using an accordion group from here. With some backend requeriments: I would like to load the contents for inside of the accordion only when the accordion is opened (clicked).

Then, I want that response be cached so you can open/close as many as you want and not overload the server.

I tried using ng-click on the heading but it gets override via the AngularUI Bootstrap.

Is there a way to solve this?

Answer 1

You can use the accordion heading tag to catch the ng-click

<div accordion ng-controller="AccordionCtrl">
  <div accordion-group ng-repeat="group in groups">
    <div accordion-heading >
      <div ng-click='loadGroup(group)'>
        {{group.title}}        
      </div>
    </div>
    {{group.loaded}}
  </div>
</div>  

with this controllers

var AccordionMenuCtrl = ['$scope', '$http' function ($scope, $http) {
  $scope.groups = [
    {
      url: 'http://whatever',
      title: 'whatever'
    },
    {
      url: 'http://whatever_else',
      title: 'whatever else'
    }
  ]

  $scope.loadGroup = function (group) {
    $http.get(group.url).success(function (data) {
      group.loaded = data
    });
  }
}];