AngularStrap-Tabs laden HTML-Fragment

Question

Ich arbeite derzeit an einem AngularJS-Projekt mit Twitter Bootstrap und versuche, meine Bootstrap-Direktiven in Angular zu verschieben. Ich habe mich für AngularStrap entschieden, da es Unterstützung für Bootstrap-Select bietet (von der ich nicht sicher war, ob sie für AngularUI gilt). Das Beispiel für Tabs behandelte jedoch nur statisches HTML. Gibt es eine Möglichkeit über AngularStrap oder AngularJS, HTML-Fragmente dynamisch zu laden, sodass sie nur aufgerufen wird, wenn auf den Tab geklickt wird? Meine HTML-Fragmente müssen auch JavaScript ausführen.

Mein Grund dafür ist zweifach. Erstens enthält jeder Tab eine Menge Inhalt, und ich möchte nicht alle Tabs gleichzeitig laden, was den Ladevorgang verlangsamen würde. Der zweite Grund ist, dass ich einen modulareren Ansatz für meinen Quellcode bevorzuge und nicht alles in dieselbe HTML-Datei packe.

Answer 1

Sie können die ng-include-Direktive verwenden, um HTML-Fragmente zu laden.

Mit dem Beispiel der AngularStrap-Tabs können Sie den statischen Inhalt mit der URL zum Abrufen des HTML-Fragments austauschen. Hier ist ein Beispiel basierend auf dem AngularStrap Tab-Beispiel mit diesen wesentlichen Änderungen:

1) $scope.tabs hat jetzt eine page-Eigenschaft anstelle von Inhalten, die auf template1.html, template2.html oder template3.html verweisen.

    $scope.tabs = [
    {title:'Home', page: 'template1.html'},
    {title:'Profile', page: 'template2.html'},
    {title:'About', page: 'template3.html'}
  ];

2) Ein ng-include wurde hinzugefügt, um die Seite des aktuell ausgewählten Tabs anzuzeigen.

Hinweis: Ich habe das ng-include außerhalb des ng-repeat platziert, damit der Inhalt jeder Tab-Seite nicht geladen wird (auch wenn er nicht angezeigt wird).