Fetches, compiles and includes an external HTML fragment.
By default, the template URL is restricted to the same domain and protocol as the application document. This is done by calling $sce.getTrustedResourceUrl on it. To load templates from other domains or protocols you may either whitelist them or wrap them as trusted values. Refer to Angular's Strict Contextual Escaping.
In addition, the browser's Same Origin Policy and Cross-Origin Resource Sharing (CORS) policy may further restrict whether the template is successfully loaded. For example, ngInclude
won't work for cross-domain requests on all browsers and for file://
access on some browsers.
<ng-include
src=""
[onload=""]
[autoscroll=""]>
...
</ng-include>
<ANY
ng-include=""
[onload=""]
[autoscroll=""]>
...
</ANY>
<ANY class="ng-include: ; [onload: ;] [autoscroll: ;]"> ... </ANY>
enter - animation is used to bring new content into the browser. leave - animation is used to animate existing content away.
The enter and leave animation occur concurrently.
Click here to learn more about the steps involved in the animation.Param | Type | Details |
---|---|---|
ngInclude | src | string | angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in single quotes, e.g. |
onload
(optional) | string | Expression to evaluate when a new partial is loaded. |
autoscroll
(optional) | string | Whether
|
Emitted every time the ngInclude content is requested.
Emitted every time the ngInclude content is reloaded.
Emitted when a template HTTP request yields an erronous response (status < 200 || status > 299)
<div ng-controller="ExampleController">
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <tt>{{template.url}}</tt>
<hr/>
<div class="slide-animate-container">
<div class="slide-animate" ng-include="template.url"></div>
</div></div>
angular.module('includeExample', ['ngAnimate'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.templates =
[ { name: 'template1.html', url: 'template1.html'},
{ name: 'template2.html', url: 'template2.html'} ];
$scope.template = $scope.templates[0];
}]);
Content of template1.html
Content of template2.html
.slide-animate-container {
position:relative;
background:white;
border:1px solid black;
height:40px;
overflow:hidden;}
.slide-animate {
padding:10px;}
.slide-animate.ng-enter, .slide-animate.ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
display:block;
padding:10px;}
.slide-animate.ng-enter {
top:-50px;}.slide-animate.ng-enter.ng-enter-active {
top:0;}
.slide-animate.ng-leave {
top:0;}.slide-animate.ng-leave.ng-leave-active {
top:50px;}
var templateSelect = element(by.model('template'));var includeElem = element(by.css('[ng-include]'));
it('should load template1.html', function() {
expect(includeElem.getText()).toMatch(/Content of template1.html/);});
it('should load template2.html', function() {
if (browser.params.browser == 'firefox') {
// Firefox can't handle using selects
// See https://github.com/angular/protractor/issues/480
return;
}
templateSelect.click();
templateSelect.all(by.css('option')).get(2).click();
expect(includeElem.getText()).toMatch(/Content of template2.html/);});
it('should change to blank', function() {
if (browser.params.browser == 'firefox') {
// Firefox can't handle using selects
return;
}
templateSelect.click();
templateSelect.all(by.css('option')).get(0).click();
expect(includeElem.isPresent()).toBe(false);});