angular.module.ng.$compileProvider.directive.ngInclude

Description

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).

Usage

as element (see IE restrictions)
<ng-include
       src="{string}"
       [onload="{string}"]
       [autoscroll="{string}"]>
</ng-include>
as attribute
<ANY ng-include="{string}"
     [onload="{string}"]
     [autoscroll="{string}"]>
   ...
</ANY>
as class
<ANY class="ng-include: {string}; [onload: {string};] [autoscroll: {string};]">
   ...
</ANY>

Directive info

  • This directive creates new scope.

Parameters

Events

Example

 <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('');
  });