# angular.widget.ng:include

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

## Description

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

## Usage

### In HTML Template Binding

    <ng:include src="..." [scope="..."] [onload="..."]></ng:include>

### Parameters

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

## Example

     <select name="url">
      <option value="examples/ng-include/template1.html">template1.html</option>
      <option value="examples/ng-include/template2.html">template2.html</option>
      <option value="">(blank)</option>
     </select>
     url of the template: <tt><a href="{{url}}">{{url}}</a></tt>
     <hr/>
     <ng:include src="url"></ng:include>

      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('url').option('examples/ng-include/template2.html');
       expect(element('.doc-example-live ng\\:include').text()).
         toBe('Content of template2.html\n');
      });
      it('should change to blank', function(){
       select('url').option('');
       expect(element('.doc-example-live ng\\:include').text()).toEqual('');
      });