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 pile" the specified template...

Plunkr: Type some input and hit "update"

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 pile" the specified template...

Plunkr: Type some input and hit "update"

• javascript
• angularjs
• templates
• angularjs-directive
• angularjs-ng-include

• it should work.. can you create a plunker – harishr Commented Jun 26, 2015 at 14:42
• 1 using the templateURL property in the directive definition is the standard way – user1821052 Commented Jun 26, 2015 at 14:56
• Are you saying you are embedding the ng-include in the template markup? Something like: template: <section><div ng-include="" /></section> ? If so I wonder if you are running into timing issues - i.e. it piles down the directive before the ng-include has pleted. Like @entre said, would be nice to see a plunker. – user1821052 Commented Jun 26, 2015 at 15:14
• @user1821052 I am already using templateUrl to tie a template (_directive_template.html) to my directive. The problem is that _directive_template.html needs to include another template. @ your second ment: Yep, that is what I mean. Updated my Q to clarify. I'll work on a plunkr. – LazerSharks Commented Jun 26, 2015 at 15:17
• What happens if you use template instead of templateUrl? So embed the markup along with the ng-include. Since both templateUrl and ng-include do $http requests perhaps the templateUrl pletes (and piles) before the ng-include? – user1821052 Commented Jun 26, 2015 at 15:31

1 Answer 1

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>