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"
I believe I understood the question. I put together a Plunker.
http://plnkr.co/edit/L4ZN5XhOpex6U5MRKsZ4?p=preview