I take everything from the example page. basically there is nothing different, controller and html body is pure copy paste from accordion example from
https://angular-ui.github.io/bootstrap/
I tried everything....
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- CSS files -->
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
<!-- JS libs -->
<script src="../../bower_components/angular/angular.min.js"></script>
<script src="../../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>
<!-- Application -->
<script>
var app = angular.module('app',['ui.bootstrap']);
app.controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
$scope.addItem = function() {
var newItemNo = $scope.items.length + 1;
$scope.items.push('Item ' + newItemNo);
};
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
});
</script>
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel {{panelClass || 'panel-default'}}">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
<p>
<button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
<button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
</p>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="oneAtATime">
Open only one at a time
</label>
</div>
<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>
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</uib-accordion-group>
<uib-accordion-group heading="Dynamic Body Content">
<p>The body of the uib-accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</uib-accordion-group>
<uib-accordion-group heading="Custom template" template-url="group-template.html">
Hello
</uib-accordion-group>
<uib-accordion-group heading="Delete account" panel-class="panel-danger">
<p>Please, to delete your account, click the button below</p>
<button class="btn btn-danger">Delete</button>
</uib-accordion-group>
<uib-accordion-group is-open="status.open">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</uib-accordion-group>
</uib-accordion>
</div>
```
in complement I add my bower dependency:
"dependencies": {
"angular": "~1.4.6",
"angular-bootstrap": "~0.13.4",
"angular-route": "~1.4.6",
"bootstrap": "~3.3.5",
"jquery": "~2.1.4",
"lodash": "~3.10.1",
"angular-bootstrap-switch": "~0.4.1",
"angularjs-slider": "~0.1.35",
"angular-animate": "~1.4.7",
"angular-ui-notification": "~0.0.14"
}
In bower.json, update angular-bootstrap to the latest: 0.14.2 as of today.
Your example doesn't work because you copy pasted the code from the documentation: this code is valid for 0.14.x but you are still in 0.13.x.
If you want to stay with version 0.13.4, you will have to remove the uib- prefix in the name of the directives, i.e.:
Replace uib-accordion with accordion
Replace uib-accordion-group with accordion-group
Replace uib-accordion-heading with accordion-heading
Check your console for an error by inspecting the element. That information will make your question easier to answer. Also you could try switching the last two script references to make sure dependencies are loaded. Loading UI Bootstrap last would be safest.
Related
Here is my code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body ng-controller="HomeController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span> {{appTitle}}
</a>
</div>
</div>
</nav>
<div class="container" ng-view>
</div>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
var app = angular.module('groceryListApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/groceryList.html",
controller: "GroceryListItemsController"
})
.when("/addItem",{
templateUrl: "views/addItem.html",
controller: "GroceryListItemsController"
})
// .otherwise({
// redirectTo: "/"
//})
});
app.controller("HomeController", ["$scope", function($scope) {
$scope.appTitle = "Grocery List";
}]);
app.controller("GroceryListItemsController", ["$scope", function($scope) {
$scope.groceryItems = [{
completed: true,
itemName: 'milk',
date: '2017-10-01'
},
{
completed: true,
itemName: 'cookies',
date: '2017-10-02'
},
{
completed: true,
itemName: 'ice cream',
date: '2017-10-03'
},
{
completed: true,
itemName: 'potatoes',
date: '2017-10-04'
},
{
completed: true,
itemName: 'cereal',
date: '2017-10-05'
},
{
completed: true,
itemName: 'bread',
date: '2017-10-06'
},
{
completed: true,
itemName: 'eggs',
date: '2017-10-07'
},
{
completed: true,
itemName: 'tortillas',
date: '2017-10-08'
}
]
}]);
groceryList.html
<div class="col-xs-12">
<a href="#/addItem" style="margin-bottom: 10px:" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
<ul class="list-group">
<li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
<span style="font-weight: bold">{{item.itemName | uppercase}}</span>
</li>
</ul>
</div>
addItem.html
<div class="col-xs-12">
<div class="jumbotron text-center">
<h1>Add Item Below</h1>
</div>
<form name="groceryForm">
<div class="form-group">
<input type="text" class="form-control" placeholder ="Grocery Item">
</div>
<div class="form-group">
<a href="#/" class="btn btn-success btn lg btn-block">
<span class="glyphicon glyphicon-pushpin"></span>
Save
</a>
</div>
<div class="form-group">
<a href="#/" class="btn btn-default btn lg btn-block">
<span class="glyphicon glyphicon-remove"></span>
Cancel
</a>
</div>
</form>
</div>
The output is showing the Add Grocery Item button along with the grocery items. However when clicking the add grocery item button ,its not redirecting to any page. This is an extension to Angular Module Routing not working
Thanks for you help.
I ran your code locally and the problem seems to be related to route's hashPrefix.
It seems that the default prefix is #!/, so your URLs should start with it:
<a href="#!/addItem" ...>
<a href="#!/" ...>
Instead of:
<a href="#/addItem" ...>
<a href="#/" ...>
This will require that you change every herf in the website. Though the more elegant solution would be to get rid of the ! mark all together using:
app.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider...
// Register routes...
});
This will change the default prefix and make it #/ instead of #!/.
By doing so, all your website URLs will work without the need to change anything else.
I am trying to create a single modal that pulls dynamic data from an ng-repeat (work in workList) in AngularJS. In other words, the modal does not live within the ng-repeat in order to prevent multiple modals from generating when I can just add dynamic content to one modal. Here's my view:
<div ng-controller="mainController">
<div ng-repeat="work in workList"
//some other code here...
<div ng-controller="modalController">
<button ng-click="open_modal(work)" data-toggle="modal" data-target="#myModal">
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<h2>
{{ timechosen.data.name }}
</h2>
</div>
</div>
Here's my modalController:
angular
.module('testApp')
.controller('modalController', ['$scope', function($scope) {
$scope.open_modal = function(time_chosen) {
$scope.timechosen = time_chosen.data;
}
}])
In my modal, {{ timechosen.data.name }} does not display anything and I'm pretty sure it's a nesting scope issue because when I set $scope.timechosen in my mainController, it seems to work fine. However, I do need to set $scope.timechosen in the modalController but can't seem to find a way around the possible nested scope issue. Any ideas?
Have you thought about putting everything inside a single controller? Like this:
angular
.module('app', [])
.controller('TestController', function($scope) {
$scope.items = [
{
label: 'Item 1',
body: 'This is the body of item 1',
title: 'This is number 1'
},
{
label: 'Item 2',
body: 'This is the body of item 2',
title: 'This is number 2'
},
{
label: 'Item 3',
body: 'This is the body of item 3',
title: 'This is number 3'
}
]
$scope.changeModalInfo = function(info) {
$scope.info = info;
}
});
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="TestController as ctrl">
<ul>
<li ng-repeat="item in items">
<button data-toggle="modal" data-target="#myModal"
ng-click="changeModalInfo(item)">
{{item.label}}
</button>
</li>
</ul>
<div class="modal fade"
id="myModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">{{info.title}}</h4>
</div>
<div class="modal-body">
<p>{{info.body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div>
</div>
</div>
</body>
</html>
If you need to break into more than one controller, you can use services or $rootScope (not advised).
angular
.module('app', [])
.controller('ModalController', function($scope, ModalService) {
$scope.modal = ModalService;
})
.controller('TestController', function($scope, ModalService) {
$scope.items = [
{
label: 'Item 1',
body: 'This is the body of item 1',
title: 'This is number 1'
},
{
label: 'Item 2',
body: 'This is the body of item 2',
title: 'This is number 2'
},
{
label: 'Item 3',
body: 'This is the body of item 3',
title: 'This is number 3'
}
]
$scope.changeModalInfo = function(info) {
ModalService.info = info;
}
})
.service('ModalService', function() {
return {};
});
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="TestController as ctrl">
<ul>
<li ng-repeat="item in items">
<button data-toggle="modal" data-target="#myModal"
ng-click="changeModalInfo(item)">
{{item.label}}
</button>
</li>
</ul>
</div>
<div class="modal fade"
id="myModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
ng-controller="ModalController as ctrl">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">{{modal.info.title}}</h4>
</div>
<div class="modal-body">
<p>{{modal.info.body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div>
</div>
</body>
</html>
I am using ui-bootstrap angularjs for generating slide down's and added a button and click event, with alert message in controller but I don't get any alert or console log.
I am facing problem in generating alert on click of button which is being loaded using template-url as you can see in code below. I am sharing my sample code below.
angular.module('ui.bootstrap.demo', [ 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
console.log("CTRL LOADED");
$scope.alertMsg = function(){
alert('hejd');
}
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<button ng-click="alertMsg()">Btn</button>
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
<uib-accordion-heading>
Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
</uib-accordion-heading>
World
</div>
</uib-accordion>
</div>
</body>
</html>
I do get the log "CTRL LOADED". But I am not getting alert message when I click.
I believe the panel creates its own scope so you need to call the parent scope to get the alert message like so:
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<button ng-click="$parent.alertMsg()">Btn</button>
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
Here is a Plunker
I am using accordion component of Angular Bootstrap UI. The first accordion is expanded by default. When user add new accordion then first accordion should collapse and newly added accordion should be expand. When user clicks any accordion then it should be expanded and collapse rest of the accordions. User can add more than one accordion.
How can I achieve this?
I'm newbie to angular and Angular Bootstrap UI.
What I have done so far
Ctrl.js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function($scope) {
$scope.oneAtATime = true;
$scope.groups = [{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
}, {
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}, {
title: 'Dynamic Group Header - 3',
content: 'Dynamic Group Body - 3'
}];
$scope.status = {
isCustomHeaderOpen: false,
isFirstOpen: true,
isFirstDisabled: false
};
// work permit form
$scope.transforms = [{
name: "transform",
id: 1,
wpformfields: [{
employee: '',
admount: ''
}]
}];
$scope.addtransactionForm = function(transform) {
$scope.currentnum = transform.wpformfields.length;
//alert("hello");
transform.wpformfields.push({
employee: '',
amount: ''
});
};
});
index.html
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl" class="container">
<br>
<br>
<br>
<div class="row">
<div class="col-md-10">
<form role="form" id="$index" class="base-form" ng-repeat="form in transforms track by $index">
<input type="checkbox" ng-model="oneAtATime" style="display:none">
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled" ng-repeat="itemfield in form.wpformfields track by $index">
<uib-accordion-heading>
Transaction <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isFirstOpen, 'glyphicon-chevron-right': !status.isFirstOpen}"></i>
</uib-accordion-heading>
<div class="md-col-10 main-container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Employee name </label>
<input type="text" class="form-control" name="employee" id="employee" ng-model="itemfield.employee">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Amount </label>
<input type="text" class="form-control" name="amount" id="amount" ng-model="itemfield.amount">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-default pull-right" ng-click="addTransaction(form, $index)"><i class="fa fa-floppy-o"></i> Save record</button>
</div>
</div>
</div>
</div>
</uib-accordion>
<div class="row">
<div class="col-md-12 col-md-offset-5">
<a class="btn btn-danger" ng-click="addtransactionForm(form)"><i class="fa fa-user-plus fa-lgt" ></i> Add new transaction record</a>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Plunker available link
There is modified version which should satisfy your needs. Basically, you need to add isOpen and isDisabled property for each accordion then set isOpen to true for new accordion, others will be closed automatically.
I downloaded the angularjs UI Bootstrap accordion directive found here: UI Bootstrap
However, I cannot get it to work and the <accordion> tag generates errors. I included the ['ui.bootstrap'] dependency in my angular module and I put references to files directly on page. Can anyone tell me what I am missing?
Here is my module:
var myApp = angular.module("dashboardManagement", ['ui.bootstrap'])
Here is my view:
#section scripts{
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/Contractor/contractorController.js"></script>
<script src="~/Scripts/app/Contractor/contractorService.js"></script>
<script src="~/Scripts/ui-bootstrap-custom-tpls-0.13.3.js"></script>
<script src="~/Scripts/app/Test/AccordionDemoCtrl.js"></script>
}
<h2>Index</h2>
<div ng-app="dashboardManagement">
<div>
<div>
<div ng-controller="AccordionDemoCtrl">
<p>
<button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
<button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
</p>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="oneAtATime">
Open only one at a time
</label>
</div>
<accordion close-others="oneAtATime">
<accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</accordion-group>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</accordion-group>
<accordion-group heading="Dynamic Body Content">
<p>The body of the accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</accordion-group>
<accordion-group is-open="status.open">
<accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
</accordion>
</div>
</div>
`
there's a couple of different issues I can see here. First is, you are including both the minified and unminified versions of these resources, so you have the same code twice. So make sure to just include <script src="~/Scripts/ui-bootstrap-custom-tpls-0.13.3.js"></script> and remove the other three similar overlapping scripts. Are you also including Angular above these scripts? because that is a dependency and will throw errors if not included before
second, is the provided example code what you're actually using? Because of course just having this:
<accordion>
</accordion>
will not do very much. You have to provide content for this directive like:
<accordion>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</accordion-group>
</accordion>
Check out the plnkr demo for full working example code:
http://plnkr.co/edit/MlcqWL?p=preview
What I discovered is that the Accordion feature is not working as expected because my _Layout.cshtml has a nav-sidebar in it. If I comment out the navbar, the Accordion works as expected. I plan to post a "new" question regarding the found issue.