Inline `ng-template` not found by `ng-include`

Question

I have a view being loaded with an embedded text/ng-template which is not being found by a ng-include later in the file. The script block sits at the very top of the view file:

<script type="text/ng-template" id="stringCondition">
    <!-- template guts -->
</script>

Which I am loading later in the file with:

<ng-include src="'stringCondition'"></ng-include>

But is producing a 404 error in the console:

GET http://localhost/~me/stringCondition 404 (Not Found)

I've tried several variants on naming (like having .html on the end) and using ng-include as an attribute instead of the high level element. All with no luck.

What could be causing an embedded ng-template to not be registering with an ng-include in the same view file?

UPDATE:

As comments and answers have pointed out, the basic design of my code is correct. But something is causing ng-template to (apparently) fail to make the template available to the system.

I updated my code to pull from a HTML file (instead of an imbedded template) and it works fine.

Is there a common situation that I could be running into that breaks ng-template?

Endurable

jsfiddle.net/nozbaveq working for me. So the issue is not this part of code :) – Gittle

@Gittle - yup, something weird is going on, see update on getting it working with regular files. Something is breaking ng-template but I'm at a loss. – Endurable

Answer 1

<div ng-app>
  <script type="text/ng-template" id="stringCondition">
     Yes, yes it did.
  </script>
  Did it work? <ng-include src="'stringCondition'"></ng-include>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

I had the same problem and came upon this post. I can now see what is causing this issue so hopefully this is helps anyone else with this issue.

The reason rgthree's code works is that the script tag for text/ng-template has to live within the scope of ng-app. So it is fine to have the template in a seperate .js file but just make sure when it is rendered on the HTML page it is within ng-app, otherwise angular won't be aware of it and will attempt to load it from the server.

Benghazi

Superb explanation as your answer help me to resolve my issue which was happening exactly what you stated in your answer.+1 – Polston

Thanks, saved three days of research and try and error – Haar

Answer 2

Seems to work fine for me. Perhaps you have something else going on outside of your example code.

<div ng-app>
  <script type="text/ng-template" id="stringCondition">
     Yes, yes it did.
  </script>
  Did it work? <ng-include src="'stringCondition'"></ng-include>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Inerney

Something definitely is screwing with my ability to use ng-template. I pulled out the code into a file and it is working fine, but I'd rather keep it to the script to keep down the file count. This is weird, I'm not sure what is killing the ng-template capabilities. – Endurable