Click here to view the Plunker code related to the issue described below
Full link: http://plnkr.co/edit/Bz3Qhf1eDuFrnKI0qnUo?p=preview
Exploring the functionalities of two components from the AngularUI suite - UI-Router and UI-Bootstrap. UI-Router manages template loading when users interact with the top navbar links.
Currently, only the first two links under 'UI Widget Templates' (AngularUI-Bootstrap and Alert) are active.
On the other hand, UI-Bootstrap enhances the visual appeal by providing widgets within the templates. While UI-Router seems correctly configured to load templates and access controllers, a challenge arises with UI-Bootstrap components failing to load and displaying unusual errors that suggest an attempt to load templates independently. What could be causing this hindrance in loading Bootstrap-UI directives?
HTML Template for Alert dropdown link
<tabset>
<tab heading="Static title">Static content</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
{{tab.content}}
</tab>
<tab select="alertMe()">
<tab-heading>
<i class="icon-bell"></i> Select me for alert!
</tab-heading>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
</tabset>
{{tabs}}
Error Message from console when Alert template loads
Angular Goodness
angular.module("uiRouterExample", [
'ui.router',
'ui.bootstrap']).config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'BSCtrl'
})
.state('angularBS', {
url: '/angularBS',
templateUrl: 'templates/angularBS.html',
controller: 'BSCtrl'
})
.state('alert', {
url: '/alert',
templateUrl: 'templates/alert.html',
controller: 'BSCtrl'
})
;
})
.controller('BSCtrl', function ($scope) {
$scope.tabs = [
{ title:"Accordion", content:"Dynamic content 1" },
{ title:"Alert", content:"Dynamic content 2"},
{title:"Buttons", content:"More Dynamic Content"}
];
$scope.test="Hello World";
$scope.alerts = [
{ type: 'error', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function() {
$scope.alerts.push({msg: "Another alert!"});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
});