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

Question

I have a problem with Accordion:

I try to do the same as demo shows, I have an array of objects . Each object contains a string, which is the title of the title . It also contains a string, which is the relative path to another HTML file, which should be the contents of the accordion group.

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

This code is in the controller named AccordionController . In my HTML, I have this code inside my controller

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

ng-include and this stuff works, but groups basically don’t respond to clicks to open or close, I also tried to add the is-open directive. The parameter I pointed to is a boolean array that changes specific values ​​to ng-click

The annoying thing that I really don't understand is that it all works here at Plunker

I also knitted

 <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 an error: TypeError: undefined is not a function in the console at boot time.

I would be grateful for any help!

Answer 1

I got a solution:

Firstly, the assignment of the AccordionController creates conflicts using angular ui bootstrap - the internal controller is called that.

I'm not sure if this is the best solution, but it works great 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 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); } }]); 

Answer 2

Hid plnkr . Uploaded 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> 

Answer 3

There may actually be a simpler solution.

You can simply make sure the links do not propagate the URL change.

Add onclick = "return false;"

Source: click here