javascript

  • For the above answers, it was assumed that the ng-app is already applied and we are using ng-include inside it.
  • fix for me: make sure you have ng-app outside of the ng-include !
  • ng-include was not populating the contents of my partial, but there were no console errors, nor 404’s.
  • I took finding the answer then finding a working JSfiddle to learn I needed
    .
  • Im playing with AngularJS for the first time, and im struggling to use ng-include for my headers and footer.

You’re doing an include of header.url instead of header.html. It looks like you want to use literals in the src attribute, so you should wrap them in quotes, as was mentioned in the comments by @DiscGolfer.

@JavascriptQnA: Simple ng-include not working #javascript #html #angularjs #angularjs-scope

You’re doing an include of header.url instead of header.html. It looks like you want to use literals in the src attribute, so you should wrap them in quotes, as was mentioned in the comments by @DiscGolfer.

to

If this is not working, check the browser console if there are any 404’s

Doh i forgot to check for 404’s in the console. My path was wrong. – Catfish Aug 14 ’14 at 14:51

@DiscGolfer This is quite vital information. I checked my code for ages before this worked! +1 – Brad Bird Oct 15 ’14 at 10:37

Can someone elaborate on why you must pass string literal? Seems like a major GOTCHA that could be avoided, perhaps I am missing something? – DeBraid Jan 21 ’15 at 22:36

It’s much more flexible. I’ve used it to embed function calls which generate the appropriate url on the fly. – Ferruccio May 6 ’15 at 18:07

I had a similar problem with a simple ng-include not rendering:

I wrapped the file path in single quotes and it now renders:

I got this thing by hit and trial. But, still don’t know what’s the use of the ‘ inside ” ? Why only ” creates problems – Pankaj Soni Dec 6 ’15 at 20:17

Crazy, but works. – Randy Hill Aug 17 at 18:45

i had a similar problem that landed me here.

was not populating the contents of my partial, but there were no console errors, nor 404’s.

then i realized what i did.

! so obvious. the price of being an Angular noob.

JEEZ, this is hard info to track down. I know that sounds ridiculous, but so many articles leave this part out. Even a couple “Hello World” tutorials didn’t mention it. I took finding this answer then finding a working JSfiddle to learn I needed

. Absurd. – clark May 17 ’15 at 3:42

inside these directives.

I also came across this issue. And this is what worked for me.

I was struggling with the same issue and have done almost all what was advised in different stacks but it didn’t work for me. On Console, I was getting the Error:

“Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.”

Later I realised, I have to use a local web server (MAMP, WAMP etc.) to make it work.

Please be careful of the above error message. Chances are you are not using a local web server to run you website.

javascript