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="..." [scope="..."] [onload="..."]></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.scope to set the HTML fragment to.
onload(optional) – {string} –
Expression to evaluate when a new partial is loaded.
<script> function Ctrl() { this.templates = [ { name: 'template1.html', url: 'examples/ng-include/template1.html'} , { name: 'template2.html', url: 'examples/ng-include/template2.html'} ]; this.template = this.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/> <ng:include src="template.url"></ng:include> </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(''); });