Angular JS ng-Включить выражение

Я пробовал читать документацию на ng-include без везения. Все, что я хочу сделать, - это ng-include оценить путь, где шаблон/частичный и загрузить содержимое:

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

Я вижу, что pageData.src возвращает "tpl/page.html" в консоли. Я пробовал следующие варианты:

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

Ни один из них не оценивает выражение. Я получаю следующую ошибку:

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

Обратная связь очень ценится!

Ответ 1

В ng-include src принимает выражение javascript, поэтому в вашем случае должно работать следующее:

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

когда вы видите это как

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

дополнительная одиночная кавычка внутри двойных кавычек является выражением javascript в этом примере строкового литерала.

когда вы видите {{}}, это директивы, которые не принимают выражения javascript, а просто строку. Например, ng-href берет строку. Эта строка может быть результатом выражения js, которое должно быть заключено в {{}}, например.

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

Наконец, чтобы упомянуть что-то, что смутило меня, когда было выражение с одиночными завитушками {}. например.

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

в этом случае это выражение js map, а ng-класс принимает имя, которое имеет значение, равное true. Поэтому, если в приведенном выше item.active оценивается значение true, тогда в качестве класса будет добавлен "активный".

Ответ 2

Попробуйте следующее: -

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

Если вы можете опубликовать jsFiddle, мне будет легко увидеть точную проблему.