Angular.js - include a fragment of template in template - django

Question

I have 3 templates:
- main template for rendering some basic stuff,
- second template which renders whole tree
- third template which should render each eleement of that tree
When I include row_renderer.html then my variable called subItem is not visible in included template. When I copy that template to second template called nodes_renderer.html then everything seems fine.
How do I pass subItem variable to row_renderer.html?
Main template
{% verbatim %}
<div ui-tree data-drag-enabled="false" class="">
<ol ui-tree-nodes="" ng-model="list">
<li ng-repeat="item in list" ui-tree-node class="table">
<div ui-tree-handle class="header row" data-toggle="collapse">
<div class="col-sm-4 col-md-2" style="">
<input type="checkbox" />
{{item.name}} ({{item.submission_count}})
</div>
<div class="col-sm-4 col-md-2">
<i class="icon" ng-class="{'icon-chevron-right': collapsed, 'icon-chevron-down': !collapsed}"></i>
{{item.last_submission_date}}
</div>
<div class="col-md-6">
<i class="icon icon-file"></i> Pobierz raport
<i class="icon icon-times"></i> Zakończ zgłoszenie
<i class="icon icon-envelope"></i> Wyślij SMS
</div>
<div class="clearfix"></div>
</div>
<ol ui-tree-nodes="" ng-model="item.children">
<li ng-repeat="subItem in item.children" ui-tree-node ng-include="'nodes_renderer.html'">
</li>
</ol>
</li>
</ol>
</div>
{% endverbatim %}
Last fragment of main template:
<ol ui-tree-nodes="" ng-model="item.children">
<li ng-repeat="subItem in item.children" ui-tree-node ng-include="'nodes_renderer.html'">
</li>
</ol>
nodes_renderer.html
{% verbatim %}
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle class="row" ng-include="'row_renderer.html'" >
<ol ui-tree-nodes="" ng-model="subItem.children">
<li ng-repeat="subItem in subItem.children" ui-tree-node ng-include="'nodes_renderer.html'">
</li>
</ol>
</div>
</script>
{% endverbatim %}
row_renderer.html - reusable template
<script type="text/ng-template" id="row_renderer.html">
<div class="clearfix"></div>
<div class="col-md-12" >
Rodzaj Awarii: {{subItem.type_name}}
</div>
<div class="clearfix"></div>
<div class="col-sm-4 col-md-2">
<input type="checkbox" />
{{subItem.name}} ({{subItem.submission_count}})
</div>
<div class="col-sm-4 col-md-2">
<i class="icon" ng-if="subItem.children" ng-class="{'icon-chevron-right': collapsed, 'icon-chevron-down': !collapsed}"></i>
{{subItem.last_submission_date}}
</div>
<div class="col-sm-4 col-md-2">
<i class="icon icon-star"></i> Przypisz do mnie
</div>
<div class="col-md-6">
<i class="icon icon-file"></i> Pobierz raport
<i class="icon icon-times"></i> Zakończ zgłoszenie
<i class="icon icon-envelope"></i> Wyślij SMS
</div>
<div class="clearfix"></div>
</div>
</script>

Answer 1

ng-repeat creates a new scope for each element, ng-include also creates a new scope.
In the case of nodes_renderer.html, you use subItem which is inherited from your parent scope when you specify ng-repeat="subItem in item.children". That's why it works for nodes_renderer.html
How do I pass subItem variable to row_renderer.html?
Try onload="subItem=$parent.PropertyToPass" :
<div ui-tree-handle class="row" ng-include="'row_renderer.html'" onload="subItem=$parent.PropertyToPass">
For more information: How to get parent element inside ng-include when iterating in ng-repeat recursively