How to include template within a directive template?

9.3k views Asked by At

How can one include a .html template within an angular directive's template?

The current way I am including a template successfully pulls that template's HTML into the directive template, but the variables within the template are not linking to the controller.

This is what I'm currently doing:

_directive_template.html

<section>
  ...
 <div ng-include="'/templates/_template_to_be_included.html'"></div>
  ...
</section> 

_template_to_be_included.html

 <form>
    <input ng-model="some_value">
    <button type="submit">Update</button>
 </form>

Directive

...
function link(scope, element, attrs) {
      scope.some_value  // not correctly linking to some_value within included template 
      }
  return {
    scope: {},
    link: link,
    templateUrl: '/templates/_directive_template.html'
  };
....

When I copy and paste the HTML of _template_to_be_included.html directly into the Directive Template (instead of using ng-include as above), everything works and some_value is correctly linked between the its place in the form and its place in the controller.

How do I properly include a template into a directive template and have its variables linked to their counterparts in the directive? It seems ng-include should have worked, since it will "fetch and compile" the specified template...

Plunkr: Type some input and hit "update"

1

There are 1 answers

3
Harbinger On BEST ANSWER

I believe I understood the question. I put together a Plunker.

http://plnkr.co/edit/L4ZN5XhOpex6U5MRKsZ4?p=preview

<div>
  <h1>Directive Template</h1>
  <p>This is just some garbage text.</p>

  <h1>ng-include template</h1>
  <div ng-include="'_template_to_be_included.html'"></div>
</div>