Fetches, compiles and includes an external HTML fragment.
Keep in mind that Same Origin Policy applies to included resources (e.g. ng-include won't work for file:// access).
<ng-include src="{string}" [scope="{Scope}"] [onload="{string}"] [autoscroll="{string}"]> </ng-include>
<ANY ng-include="{string}" [scope="{Scope}"] [onload="{string}"] [autoscroll="{string}"]> ... </ANY>
ng-include|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'"
.
scope(optional=new_child_scope) – {Scope=} –
optional expression which evaluates to an instance of angular.module.ng.$rootScope.Scope to set the HTML fragment to.
onload(optional) – {string=} –
Expression to evaluate when a new partial is loaded.
autoscroll(optional) – {string=} –
Whether ng-include
should call $anchorScroll
to scroll the viewport after the content is loaded.
Emitted every time the ng-include 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(''); });