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.
Related
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>
I have a file index.html with the following code:
<div ng-include="'fragment-1.html'"></div>
The code of fragment-1.html:
<b>Inside Fragment 1</b>
<script type="text/javascript">
alert("Inside Fragment 1");
</script>
When I load index.html into the browser, output is:
Inside Fragment 1
The DOM has the <script> tags but the alert is not shown.
My hypothesis:
Because the DOM loads first along with the Angular modules and then Angular checks and binds the data(in this case, fragment-1.html file content) to the view(index.html), it just adds the elements of fragment-1.html in DOM. To execute the JS inside fragment-1.html, we should create a hack for it. Am I right in this explanation? Or is there something else that I may be missing?
I had to load jQuery before loading Angular. The explanation is in the link specified above. Explanation: script not running in templateurl
To include another partial HTML file in your parent HTML file, one can also use Angular directives, depending on the situation. See this answer for when to use ng-include and when to use directives: https://stackoverflow.com/a/24172025/3132646
You don't need to hack. Angular gives you a neat and simple solution to what you want to achieve with your code.
Controller
.controller('fragmentOneCtrl', function ($scope) {
alert('"Inside Fragment 1"');
})
View
<div ng-repeat="go in ['go', 'gogo']" ng-include="'includeThis'">
</div>
<script type="text/ng-template" id="includeThis">
<div ng-controller="fragmentOneCtrl">
</div>
</script>
You may want to use $sce.trustAsHtml before injecting the resource in html
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'm using AngularJS to "include" html partials in my web app. I'm using a nested ng-include for this.
I also have an animation on the outer most ng-include. It all works fine. The only problem is that the outer ng-include template is loaded first. Then the included HTML file also has an ng-include which also loads an HTML file.
The last included HTML file causes the div to suddenly expand in size and that makes the animation look jumpy and weird.
This problem could be solved if all the nested ng-includes could be preloaded somehow. Is something like that possible in AngularJS?
The code I have looks something like this:
My main view:
<div class="animation-grow-in animation-grow-out" ng-repeat="myList">
<div ng-include"base-partial.html"></div>
</div>
The base-partial.html file:
<div ng-switch="myList.type">
<div ng-switch-when="file1">
<div ng-include="'file1.html'"></div>
</div>
<div ng-switch-when="file2">
<div ng-include="'file2.html'"></div>
</div>
</div>
The file1.html and file2.html contain forms.
But because filex.html is loaded with a delay that makes it all look jumpy. So is there a solution for this problem? Can I preload all nested ng-includes?
You can use angularjs template caching service to cache your template. When boot strapping your application, put all your templates inside a cache so that it will not make XHR calls for your templates.
https://docs.angularjs.org/api/ng/service/$templateCache
I have a directive which loads content from an external HTML file. Passed into this directive is some scope data which is used in the rendering of that HTML fragment. e.g.
<div class="{{cls}}" data-obj="{{obj}}" data-id="{{id}}">
<!-- remainder of content here -->
</div>
What I would like to do within this directive is to load a further HTML partial within this based on the original scope data passed into the directive. I can't seem to get this to work, but it should be something along the lines of the following:
<div class="{{cls}}" data-obj="{{obj}}" data-id="{{id}}">
<!-- remainder of content here -->
<div ng-include="partials/{{obj}}.html></div>
</div>
Using this, the file doesn't get included, but I don't get any errors either. Can anybody assist me here?
NB: I read this, which is a similar issue, but hasn't helped me.
UPDATE - I noticed in Chrome dev tools that the URL is being resolved as expected, but the file contents are not getting included. I thought from the docs that ng-include loaded and compiled the requested fragment, so I was expecting this to work.
Found a solution in the end, by declaring the following in the directive:
<div ng-include src="view.getView()"></div>
and the following in the directive controller:
$scope.view = {
getView: function() {
return "partials/" + $scope.obj + ".html";
}
};
Works perfectly now!
In comment on the comment of Shane Gadsby: it is not <div ng-include src="'partials/'+{{obj}}+'.html'"></div> but <div ng-include src="'partials/'+obj+'.html'"></div>.
Your comment explains why 'this is what you need to force it from object literals to a string', so everything not in single quotes is handled by the compiler as a scope object.