I'm trying to do a simple UI-Bootstrap accordion in a SharePoint 2013 page.
This is the markup page:
<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyPage.ascx.cs" Inherits="MyProject.CONTROLTEMPLATES.MyProject.MyPage" %>
<link href="../../../_layouts/15/MyProject/Styles/StyleSheet.css" rel="stylesheet" />
<link href="../../../_layouts/15/MyProject/Styles/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="../../../_layouts/15/MyProject/Styles/angularjs/angular-flash.css" rel="stylesheet" />
<link href="../../../_layouts/15/MyProject/Styles/angularjs/ngDialog.css" rel="stylesheet" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-animate.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-route.min.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/ng-table.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-sh-checkbox.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-flash.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-mask.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/ngDialog.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/bootstrap/ui-bootstrap-tpls-0.14.2.min.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angularCommonModule.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/MyPALRequests.js" Localizable="False" OnDemand="False" />
<div ng-app="myApp">
<div id="main" ng-controller="myController">
<uib-accordion close-others="true">
<uib-accordion-group heading="Static Header 1, initially expanded" is-open="true">
This content 1 is straight in the template.
</uib-accordion-group>
<uib-accordion-group heading="Static Header 2">
This content 2 is straight in the template.
</uib-accordion-group>
</uib-accordion>
</div>
</div>
I also included ui.bootstrap
module:
var myApp = angular.module('myApp', [ '...', '...', '...', 'ui.bootstrap']);
The result is only a text like This content 1 is straight in the template. This content 2 is straight in the template.
without accordion.
I made this plunker that works perfectly so I found that if I delete the ui-bootstrap-tpls-0.14.2.js
script I get same behavior of my SharePoint page. The ui-bootstrap-tpls-0.14.2.js
script has some problem to load? I don't get any error in developer tools console.
In another view of this page I also use UI-Bootstrap radio button and it works.
Thank you