Angular-UI-Router fehlschlägt, laden, Vorlage, dass ich nicht Fragen
Plunker Code Zeigt Problem Unten Beschrieben
http://plnkr.co/edit/Bz3Qhf1eDuFrnKI0qnUo?p=preview
Ich bin mit zwei Komponenten des AngularUI-suite, UI-Router und UI-Bootstrap.
UI-Router ist verantwortlich für das laden von Vorlagen, wenn der Benutzer klickt auf meiner top-navbar links.
Nur die ersten beiden links unter "UI-Widget-Vorlagen" (AngularUI-Bootstrap und Alarm) aktiv sind
UI-Bootstrap ist dafür verantwortlich, nette widgets innerhalb der templates.
Ich scheine zu haben, UI-Router ordnungsgemäß konfiguriert, dass ich bin laden die richtigen Vorlagen und die Vorlagen haben Zugriff auf die richtigen controller. Das problem, das ich habe ist, dass meine UI-Bootstrap-Komponenten werden nicht geladen und erzeugen seltsame Fehler, die scheinen zu zeigen, dass Sie irgendwie versucht zu laden Vorlagen selbst???
Was habe ich falsch behandelt in meiner Implementierung ist, dass die Bootstrap-UI-Richtlinien von dem laden?
HTML-Template für die Warnung, 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}}
Fehlermeldung von der console wenn ein Alarm Vorlage lädt
Eckige Güte
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);
};
});
Du musst angemeldet sein, um einen Kommentar abzugeben.
UI-Bootstrap stützt sich auf das Vorhandensein von Vorlagen, die nicht in der ui-bootstrap-[version].js-Datei. Die build-Dateien Konfigurations-Optionen beschrieben sind hier. Ein relevanter Ausschnitt:
In der plunkr, die Sie verwenden ui-bootstrap-0.7.0.js nicht ui-bootstrap-tpls-0.7.0.js. Das erstere ist nicht gebündelt mit den Vorlagen, aber noch Verweise auf Sie hart codiert, die nach den Richtlinien' templateUrls, zum Beispiel:
Bearbeiten, einschließlich @inolasco Antwort:
Wenn Sie ui-bootstrap-tpls.js und immer noch dieses Problem haben, könnte es sein, dass Sie brauchen, um hinzuzufügen,
in Ihrem Modul.
Hinzufügen, um die akzeptierte Antwort, die mich führen, zu lösen ein ähnliches Problem. wenn Sie ui-bootstrap-tpls.js und immer noch dieses Problem haben, könnte es sein, dass Sie brauchen, um hinzuzufügen,
in Ihrem Modul. Das funktionierte für mich.