Databases
StackOverflow2013
Postsdbo
POAngular UI-Router fails to load template that I didn't ask for
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngular UI-Router fails to load template that I didn't ask for
    text
    copied!<p><a href="http://plnkr.co/edit/Bz3Qhf1eDuFrnKI0qnUo?p=preview" rel="noreferrer">Plunker Code Showing Issue Described Below</a></p> <p><a href="http://plnkr.co/edit/Bz3Qhf1eDuFrnKI0qnUo?p=preview" rel="noreferrer">http://plnkr.co/edit/Bz3Qhf1eDuFrnKI0qnUo?p=preview</a></p> <p>I am using two components of the AngularUI suite, UI-Router and UI-Bootstrap. UI-Router is responsible for loading templates when the user clicks on my top navbar links.</p> <p><em>Only the first two links under 'UI Widget Templates' (AngularUI-Bootstrap and Alert) are active</em></p> <p><img src="https://i.stack.imgur.com/dUiAx.jpg" alt="enter image description here"></p> <p>UI-Bootstrap is responsible for making nice widgets within the templates. I seem to have UI-Router properly configured in that I am loading the proper templates and those templates have access to the correct controller. The problem I am having is that my UI-Bootstrap components are failing to load and generating odd errors which seem to indicate they are somehow attempting to load templates themselves??? What have I mishandled in my implementation that is keeping the Bootstrap-UI directives from loading?</p> <p><strong>HTML Template for Alert dropdown link</strong></p> <pre><code>&lt;tabset&gt; &lt;tab heading="Static title"&gt;Static content&lt;/tab&gt; &lt;tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled"&gt; {{tab.content}} &lt;/tab&gt; &lt;tab select="alertMe()"&gt; &lt;tab-heading&gt; &lt;i class="icon-bell"&gt;&lt;/i&gt; Select me for alert! &lt;/tab-heading&gt; I've got an HTML heading, and a select callback. Pretty cool! &lt;/tab&gt; &lt;/tabset&gt; {{tabs}} </code></pre> <p><strong>Error Message from console when Alert template loads</strong></p> <p><img src="https://i.stack.imgur.com/BTJii.jpg" alt="enter image description here"></p> <p><strong>Angular Goodness</strong></p> <pre><code>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); }; }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload