AngularJS ng-include enthält keine Ansicht, es sei denn, sie wird in $ scope übergeben

121

Ist es falsch anzunehmen, dass ngIncludedies einen rohen Weg einschlagen kann? Ich versuche immer wieder, meine ngIncludewie folgt einzustellen :

<div ng-include src="views/header.html"></div>

Das funktioniert nicht, aber wenn ich so etwas mache, funktioniert es.

// HeaderController
app.controller('HeaderCtrl', function($scope){
   $scope.templates = {[
     template: { url: 'views/header.html' }
   ]};

   $scope.template = $scope.templates[0].template;
});

In meiner index.html

<div ng-controller="HeaderCtrl">
  <div ng-include src="template.url"></div>
</div>

Ist ngIncludeAusnahme , dass nur Werte aus der Reichweite? Wenn ja, warum ist es so und nicht ein direktes Include des HTML-Teils.

angularjs angularjs-ng-include

— Tschad
quelle

Antworten:

327

ng-includeakzeptiert einen Ausdruck. Wenn Sie die explizite URL direkt dort angeben möchten, müssen Sie eine Zeichenfolge angeben.

<div ng-include src="'page.html'"></div>

— Tosh
quelle

Ja, das habe ich gerade gesehen. Beispiele, die ich mir ansah, waren die Verwendung einer älteren Version von Angular.

— Tschad

Ich habe heute Nachmittag viel Zeit damit verbracht, dies herauszufinden. Von Natürlich braucht es eine Zeichenfolge zu sein. Das macht vollständigen Sinn.

— Code Whisperer

funktioniert nicht mit ngSanitize, das im App-Modul aktiviert ist. Ich suche nach einer Lösung.

— Dida

Noch etwas: Die Seite darf keine Unterstriche als Dateinamen haben.

Kleine einfache Anführungszeichen lösen das Problem. Ich konnte keine genaue Veränderung sehen (Mein armes Auge). Bitte erwähnen Sie das Hinzufügen von einfachen Anführungszeichen innerhalb der doppelten Anführungszeichen in Worten.

— Fizer Khan

ng-include, wie andere Direktiven ( ng-class, ng-src...) einen Winkelausdruck aus dem Bereich auswerten . Ohne Anführungszeichen ( '') wird nach einer Variablen des Bereichs gesucht.

Beachten Sie, dass Sie das srcAttribut nicht angeben müssen .

<div ng-include src="'views/header.html'"></div>

Kann umgeschrieben werden auf: (das ist einfacher)

<div ng-include="'views/header.html'"></div>

Sie können ng-include auch als Element verwenden :

<ng-include src="'views/header.html'"></ng-include>

— Mistalis
quelle