Angular JS ng-Include expression

Question

I've tried to read the documentation on ng-include with no luck thus far. All I want to do is have the ng-include evaluate the path of where the template/partial is and load the contents:

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

I can see pageData.src is returning "tpl/page.html" in the console. I've tried the following variations:

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

None of them seem to evaluate the expression. I receive the following error:

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 is much appreciated!

Answer 1

In ng-include src takes a javascript expression so in your case the following should work:

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

when you see it like this

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

the extra single quote inside the double quotes is a javascript expression in this example a string literal.

when you see {{}} this is for directives that do not take javascript expressions but just a string. For example ng-href takes a string. That string can be the result of a js expression which should be enclosed on {{}} e.g.

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

Finally to mention something that confused me which was when there is an expression with single curlies {}. e.g.

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

in this case this is a js map expression and the ng-class takes the name that has a value the evaluates to true. So if in the above item.active evaluates to true then 'active' will be added as a class.

Answer 2

Try this:-

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

If you can post a jsFiddle, it would be easy for me to see the exact problem.