Accordion in Angularjs

Question

I am using the following link for creating Accordion in angular. Into that, I am sending HTML structure from a controller. But at view side it doesn't show me Accordion. Following is a sample code:

 var final='<uib-accordion close-others="oneAtATime"><uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">This content is straight in the template.</uib-accordion-group>'

and at view side I am displaying data like:

<div ng-bind-html="final"></div>

I want to send HTML structure from controller side. Please help me into this why it is not showing accordion properly?

No, I am not creating Plunker. I am new to angular so I don't know my approach is right or wrong can you please help me into this? — Suraj Dalvi, Dec 14 '15 at 13:23
Have you declared a dependency on the `ui.bootstrap` and `ui.bootstrap.accordion` modules? Something like that: `var app = angular.module("appModule", ["ui.bootstrap", "ui.bootstrap.accordion"]);` — Sergey Kolodiy, Dec 14 '15 at 13:26
I added all dependency, but it is not showing me accordion properly? — Suraj Dalvi, Dec 14 '15 at 13:30

score 0 · Answer 1 · answered Dec 14 '15 at 13:25

Is your final variable is defined as you shown? In this case your view does not know what is that - 'final'. Its undefined for it.

Try to declare it with the scope: $scope.final='<uib-accordion close-others="oneAtATime"><uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">This content is straight in the template.</uib-accordion-group>' In this case your view see that final is $scope.final and can read it.

Another way (if you don't want to use $scope) to declare it as controller variable using this: this.final='<uib-accordion close-others="oneAtATime"><uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">This content is straight in the template.</uib-accordion-group>'. And you can call it from the view like this: <div ng-bind-html="yourControllerName.final"></div>

score 0 · Answer 2 · edited May 23 '17 at 12:04

You have to $compile this variable for rendering on the view. You can create a directive that contains $compile service for rendering. Then you can use it on that view for rendering the dynamic DOM that is in your variable.

Directive:

app.directive('compile', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, elem, attrs) {
      scope.$watch(attrs.compile, function(html) {
        elem.html(html);
        $compile(elem.contents())(scope);
      });
    }
  };
});

Like;

<div compile="final"></div>

Sure, you don't forget to set final variable to $scope. Like;

$scope.final = final;

or

$scope.final='<uib-accordion close-others="oneAtATime"><uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">This content is straight in the template.</uib-accordion-group>';

I think you need to look that answer.

Accordion in Angularjs

2 Answers2