I'm trying to use a ng-include to include a template within a template in a component, the folder structure is as follows
-DE
--de
---test.html
-template.html
template.html content
<div>
<ng-include src "'/DE/de/test.html''"></ng-include>
</div>
This is what I get rendered in the page html
<!-- ngInclude: undefined -->
EDIT
I've edited the html as follows
<ng-include src="'/DE/de/test.html'"></ng-include>
Still getting the same error
Starting the path with a slash / makes it as absolute path. This should work fine till your app's root is pointing to same folder in which template.html is put.
But, if that's not the case, you need to use relative path to make it work:
<ng-include src="'DE/de/test.html'"></ng-include>
This way, AngularJS fetches the source file, with path relative to the current folder.
Note that you have several mistakes in the posted code:
Missing equal sign for the src attribute
Extra single quote inside the path value
NOTE : you do not need single quotes, the value of the src attribute is assumed to be a string
Fixed version:
<div>
<ng-include src="/DE/de/test.html"></ng-include>
</div>
Related
I am trying to include a template and its not working.I have had trouble with includes every single time I try to use them. Is there something I am doing wrong?
views structure :
https://i.stack.imgur.com/yFeYs.png
UserList.html :
<p>
UserList
</p>
<div ng-include src="'../Partials/Paging.html'"></div>
update :
Paging : localhost/Administrator/App/Views/User/UserList.html
UserList : localhost/Administrator/App/Views/Partials/Paging.html
Index : localhost/Administrator/Index.html
Your include path starts on your index.html, since its loaded from there while running your SPA.
So your include path has to be relative to your index.html:
<div ng-include="'App/Views/Partials/Paging.html'"></div>
Try this
<div ng-include="'../Partials/Paging.html'"></div>
till if you will not get the src path might be wrong
Try
<div ng-include="'App/Views/Partials/Paging.html'"></div>
ng-include doesn't requires src parameter. If you still see any error please verify the path to Paging.html
I am using angular with sightly. So I have angular html template surrounded by script tag, which also has sightly attributes like data-sly-resource.
Below example code will give you clear idea.
<script type="text/ng-template" id="example.html">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'" data-sly-test="${!wcmmode.edit}"></div>
</section>
</script>
It works fine in non-edit mode , but in edit mode, I can not author data-sly-resource part. It looks like <script> tag is not letting it work roperly because when I remove <script> tag ,than I can author it.
And removing script tag is not an option as well.
So how can I stop script tag form breaking sightly functionality in edit mode?
I ended up doing repetition of code , one for author mode and other for non edit mode.
Below is close resemblance of my solution.
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" data-sly-test="${wcmmode.edit}" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
<script type="text/ng-template" id="example.html" data-sly-test="${!wcmmode.edit}">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
</script>
As you can see in above code, what to show and when works via data-sly-test="${wcmmode.edit}".
I also tried to to create sightly template for redundant code and than try data-sly-use but now, it works in author mode but sightly can't put template inside <script> tag even though I used # context='unsafe'
There is a workaround based on the Sightly Reference
Put the markup inside a separate html file say mymarkup.html parallel to mycomponent.html
In Component HTML file (e.g mycomponent.html) use <script type="text/ng-template" data-sly-include="mymarkup.html"></script>
In mymarkup.html we can use Sightly tags normally and those would be evaluated/executed normally, we would not even need to specify the # context for variables we would read using use API. The final markup rendered by component mycomponent.html when dragged to page would render something like this below
<script type="text/ng-template">
//mymarkup.html evaluated content here
</script>
In your script tag you could add data-sly-unwrap="${wcmmode.edit}"
This will remove script tag in edit mode allowing you to edit included components but in any other mode the script tag gets rendered.
I found the following mention in Netcentric's AEM Sightly Style Guide:
Then, because the HTML grammar ignores elements located inside a
< script > or < style > elements, no block statement can be used within
them.
Although it's not explicitly stated in the Sightly spec, it makes sense. So your fix is right.
I am using angularjs ui bootstrap, and I have my popover template all set up and working. Here is what I have.
directive.html
...
popover-title="Title"
popover-template="'popover.template.html'"
...
A bit lower in the same directive I have the template:
<script type="text/ng-template" id="popover.template.html">
<label>Popup Title:</label>
<span>Popup content</span>
</script>
Now I will need this popover for a few elements, so how can I put it in an actual popover.template.html file in my source tree I just made in the same directory in the simplest way (least lines of code) possible?
The solution was this:
leave the script tags needed for inline tags behind
give the template parameter the full path
create a new file in the desired place, no header needed inside
then add to the element you want popover to work on this:
popover-template="'app/templates/popover.template.html'"
No need for templateCache or any other tricks, the site only sends a single request, even with multiple elements using the same template. It loads on first request.
Situation
I started an app with Playframework (Scala) and AngularJS v1.3.
(Exactly the template Play Silhouette Angular Seed)
Goal
Loading difference templates using ng-include or a directive.
Problem
Always that I put a reference in Angular code, it doesn't work.
Example:
<div ng-include="'/tpl.html'"></div>
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script>
Result: works!!
Now, if I put the template tpl.html in a file in the same directory:
<div ng-include="'tpl.html'"></div>
Result: Doesn't work!! (And in other directories, I tried all the possible routes...)
The same problem occurs in directives, if I put the template inside the directory it works well, but if I try to put in another file it doesn't work.
Question
I used Angular in other projects and never occurs something like this. I think that this happens because Scala (language of Playframework) needs to be compiled and the files .scala.html are converted in .html.
How can I create some templates .html and then with ng-include
put the correct reference?
The root directory is the same that index.htmlfile (path: ui/app).
If the file view1.html is in the path ui/app, the ng-include will be like this:
<div ng-include="'./view1.html'"></div>
Because ui/app is the root path.
I've added following code to my html template:
<div ng-include src="'templates/header.html'"></div>
my header.html file contains:
<ion-header-bar align-title="center" class="bar-navigation">
<p class="center">TEST Include</p>
</ion-header-bar>
it's not rendering the ion-header-bar.
Does anyone know how to get this working please ?
As per the ngInclude documentation at: https://docs.angularjs.org/api/ng/directive/ngInclude
You use src when ng-include is being used as the element. eg.
<ng-include src="templates/header.html"></ng-include>
Otherwise, provide the template location as the value of the ng-include attribute.
<div ng-include="templates/header.html"></div>
Also, remove the single quotes from your template source, they are not necessary.
Renaming the file header.html into header.tpl.html fixed my problem.
That's because gruntfile.js includes tpl.html files only.
The included ion-nav-bar is not visible though, but I guess that's a different issue.
Thanks to #Andrew for helping out.