2014-01-23 11 views
11

Ich habe versucht, die Dokumentation auf ng-include ohne Glück bisher zu lesen. Alles, was ich tun möchte, ist die ng-include den Pfad in dem die Vorlage/Teil ist zu bewerten und die Inhalte laden:Angular JS ng-Include Ausdruck

<div data-ng-include src="'{{pageData.src}}'"></div> 

I pageData.src kehrt "tpl/page.html" in der Konsole sehen können. Ich habe die folgenden Variationen versucht:

<div data-ng-include src="{{pageData.src}}"></div> 
<div data-ng-include src='{{pageData.src}}'></div> 
<div data-ng-include src={{pageData.src}}></div> 

Keiner von ihnen scheinen den Ausdruck auszuwerten. Ich erhalte den folgenden Fehler:

Error: [$parse:syntax] http://errors.angularjs.org/1.2.9/$parse/syntax?p0=pageData.src&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=3&p3=%7B%7BpageData.src%7D%7D&p4=pageData.src%7D%7D 

Feedback wird sehr geschätzt!

Antwort

26

In ng-include src einen JavaScript-Ausdruck nimmt so in Ihrem Fall sollte folgende Arbeiten:

<div data-ng-include src="pageData.src"></div> 

, wenn Sie es wie diese innerhalb der doppelten Anführungszeichen

<div data-ng-include src="'templates/myTemplate.html'"></div> 

die zusätzlichen Apostroph sehen ist ein JavaScript-Ausdruck in diesem Beispiel ein String-Literal.

Wenn Sie {{}} sehen, gilt dies für Anweisungen, die keine JavaScript-Ausdrücke, sondern nur eine Zeichenfolge verwenden. Zum Beispiel nimmt ng-href eine Zeichenkette an. Diese Zeichenfolge kann das Ergebnis eines js-Ausdrucks sein, der in {{}} z.

<a ng-href="{{pageData.src}}/myImage.jpg">Go</a> 

Schließlich etwas zu erwähnen, das mich verwirrt, war, wenn es einen Ausdruck mit einzelnen Curlies {} gibt. z.B.

<a ng-class="{'active': item.active, 'locked': item.disabled}">Go</a> 

in diesem Fall ist dies eine js Karte Ausdruck und die ng-Klasse hat einen Namen, der einen Wert für die auswertet auf true hat. Wenn also im obigen item.active true ausgewertet wird, wird "active" als Klasse hinzugefügt.

+0

Vielen Dank! Ich kann nicht glauben, dass ich das nicht versucht habe. – Jesse

4

Try this: -

<div data-ng-include="pageData.src"></div> 

Wenn Sie einen jsFiddle veröffentlichen können, wäre es leicht für mich das genaue Problem zu sehen.