Fetches, compiles and includes an external HTML fragment.
Keep in mind that Same Origin Policy applies to included resources (e.g. ngInclude won't work for cross-domain requests on all browsers and for file:// access on some browsers).
<ng-include src="{string}" [onload="{string}"] [autoscroll="{string}"]> </ng-include>
<ANY ng-include="{string}" [onload="{string}"] [autoscroll="{string}"]> ... </ANY>
<ANY class="ng-include: {string}; [onload: {string};] [autoscroll: {string};]"> ... </ANY>
ngInclude|src – {string} –
angular expression evaluating to URL. If the source is a string constant,
make sure you wrap it in quotes, e.g. src="'myPartialTemplate.html'"
.
onload(optional) – {string=} –
Expression to evaluate when a new partial is loaded.
autoscroll(optional) – {string=} –
Whether ngInclude
should call $anchorScroll
to scroll the viewport after the content is loaded.
Emitted every time the ngInclude content is reloaded.
<script> function Ctrl($scope) { $scope.templates = [ { name: 'template1.html', url: 'examples/ng-include/template1.html'} , { name: 'template2.html', url: 'examples/ng-include/template2.html'} ]; $scope.template = $scope.templates[0]; } </script> <div ng-controller="Ctrl"> <select ng-model="template" ng-options="t.name for t in templates"> <option value="">(blank)</option> </select> url of the template: <tt><a href="{{template.url}}">{{template.url}}</a></tt> <hr/> <div ng-include src="template.url"></div> </div>
it('should load template1.html', function() { expect(element('.doc-example-live [ng-include]').text()). toBe('Content of template1.html\n'); }); it('should load template2.html', function() { select('template').option('1'); expect(element('.doc-example-live [ng-include]').text()). toBe('Content of template2.html\n'); }); it('should change to blank', function() { select('template').option(''); expect(element('.doc-example-live [ng-include]').text()).toEqual(''); });