Angular UI - Bootstrap Accordion not working/dynamic ng-include

Question

I have a problem with the Accordion:

I try to do pretty much the same what the demo shows, I have an Array of objects. Every object contains a string, which is the header title. It also contains a string which is the relative path to another HTML-File, which should be the content of the accordion-group.

$scope.groups = [{
    groupTitle: "Title1",
    templateUrl: "sites/file1.html"
}, {
    groupTitle: "Title2",
    templateUrl: "sites/file2.html"
}];

This code is in a controller called AccordionController. In my HTML I have this code inside of my controller

<accordion>
    <accordion-group ng-repeat="group in groups" heading="{{group.groupTitle}}">
        <div ng-include="group.templateUrl"></div>
    </accordion-group>
</accordion>

The ng-include and that stuff works, but the groups basically don't react on clicks to then open or close, I also tried to add the is-open directive. With the parameter I pointed to a boolean Array which changes the specific values on ng-click

The annoying thing - which I really don't understand anyway - is that all this works here in Plunker

I also linked

<link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css" />
<script type="text/javascript" src="scripts/angular.js"></script>
<script type="text/javascript" src="scripts/ui-bootstrap-tpls-0.12.0.js"></script>

and added bootstrap.ui to my module.

I get the error-message: TypeError: undefined is not a function in the console when I load it.

I would appreciate any help!

Solution 1

I got the solution:

First of all, naming a controller AccordionController creates conflicts with angular ui bootstrap - an internal controller is named like this.

I'm not sure if this is the best solution, but it works fine for me.

Here is the HTML:

<div ng-controller="AccordionCtrl">
    <accordion class="accordion" close-others="oneAtATime">
        <accordion-group  ng-repeat="group in groups" is-open="status.isOpen[$index]" >
            <accordion-heading>
                {{group.groupTitle}} <i class="fa chevron-icon" ng-class="{'fa-chevron-down': status.isOpen[$index], 'fa-chevron-right': !status.isOpen[$index]}"></i>
            </accordion-heading>
            <div ng-include="group.templateUrl"></div>
        </accordion-group>
    </accordion>
</div>

and of course the JS:

settings.controller('AccordionCtrl', ['$scope',
function ($scope) {
    $scope.oneAtATime = false;

    $scope.groups = [{
        groupTitle: "Test1",
        templateUrl: "file1.html"
    }, {
        groupTitle: "Test2",
        templateUrl: "file2.html"
    }, {
        groupTitle: "Test3",
        templateUrl: "file3.html"
    }];

    $scope.status = {
        isOpen: new Array($scope.groups.length)
    };

    for (var i = 0; i < $scope.status.isOpen.length; i++) {
        $scope.status.isOpen[i] = (i === 0);
    }
}]);

Solution 2

Forked your plnkr . Loaded template file

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1',
      templateUrl: 'file1.html'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2',
      templateUrl: 'file2.html'
    }
  ];
});


<div ng-controller="AccordionDemoCtrl">

  <accordion>
    <accordion-group ng-repeat="group in groups" heading="{{group.title}}">
      <div ng-include="group.templateUrl"></div>
    </accordion-group>
  </accordion>
</div>

Solution 3

Actually, there might be a simpler solution.

You can just make sure that the links don't propagate the URL change.

Add to the a tag onclick="return false;"

Source: click here