6

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?

Nicholas Pappas
  • 10,439
  • 12
  • 54
  • 87
  • https://jsfiddle.net/nozbaveq/ working for me. So the issue is not this part of code :) – ehlers Mar 20 '15 at 18:44
  • @ehlers - 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. – Nicholas Pappas Mar 20 '15 at 18:48

2 Answers2

15

<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.

daniellepelley
  • 1,939
  • 1
  • 11
  • 12
1

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>
rgthree
  • 7,217
  • 17
  • 21
  • 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. – Nicholas Pappas Mar 20 '15 at 18:42