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!

DavidC · Accepted Answer · 2014-01-23 16:02:02Z

27

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.

edited Jan 23, 2014 at 16:02

answered Jan 23, 2014 at 14:25

DavidC

1,8621 gold badge18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jesse Over a year ago

Thank you! I can't believe I didn't try that.

Pawan Kotak Over a year ago

Can we pass expression in ng-include? i want to change url dynamically using controller

Abhishek Jain · Accepted Answer · 2014-01-23 14:24:46Z

4

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.

answered Jan 23, 2014 at 14:24

Abhishek Jain

2,97724 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angular JS ng-Include expression

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related