Populate jQuery UI accordion after AngularJS service call

Question

I\'m currently trying to build an AngularJS app where I\'m using a jQuery UI accordion control.

The problem is, that the jQuery UI accordion is initiated before<

Answer 1

Yes you need a directive and you can handle this more angular way !

In HTML define the directive

Return promise from your service and pass the promise to the directive.

In controller

$scope.accordionData = myService.getAccordionData();

The ui-accordion directive looks like

.directive('uiAccordion', function($timeout) {
return {
  scope:{
    myAccordionData: '=uiAccordion'
  },
  template: '
',
  link: function(scope, element) {
    scope.myAccordionData.then(function(data) {
      scope.myData = data;
      generateAccordion();
    });

    var generateAccordion = function() {
      $timeout(function() {   //<--- used $timeout to make sure ng-repeat is REALLY finished
        $(element).accordion({
          header: "> div > h3"
        });
       });
     }
   }
  }
})

When your service call succeed then you create your accordion. Here you can define your own accordion-template like

Template binds with your model data myData. I use ng-repeat inside the template to create accordion-header and accordion-body HTML.

In the generateAccordion method i use $timeout to make sure the ng-repeat is really finished rendering because $timeout will execute at the end of the current digest cycle.

Check the Demo