Pass parameter to Angular ng-include

Question

I am trying to display a binary tree of elements, which I go through recursively with ng-include.

What is the difference between ng-init=\"item = item.left\"

Answer 1

Pass parameter to Angular ng-include

You don't need that. all ng-include's sources have the same controller. So each view sees the same data.

What is the difference between ng-init="item = item.left" and ng-repeat="item in item.left"

[1]

ng-init="item = item.left" means - creating new instance named item that equals to item.left. In other words you achieve the same by writing in controller:

$scope.item = $scope.item.left

---

[2]

ng-repeat="item in item.left" means create list of scopes based on item.left array. You should know that each item in ng-repeat has its private scope

---

I am trying to display a binary tree of elements, which I go through recursively with ng-include.

I posted in the past answer how to display tree by using ng-include.

It might helpful: how-do-display-a-collapsible-tree

The main part here that you create Node with id wrapped by <scipt> tag and use ng-repeat:

  <script type="text/ng-template"  id="tree_item_renderer">
        <ul class="some" ng-show="data.show"> 
          <li ng-repeat="data in data.nodes" class="parent_li"  ng-include="'tree_item_renderer'" tree-node></li>
        </ul>
  </script>


<ul>
  <li ng-repeat="data in displayTree"  ng-include="'tree_item_renderer'"></li>

Answer 2

I am using ng-include with ng-repeat of an array containing string. If you want to send multple data so please see Junus Ergin answer.

See my code Snippet:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
<div ng-repeat="name in ['Sanjib Pradhan']" ng-include="'your_template.html'"></div>
<div ng-repeat="name in ['Chinmay Sahu']" ng-include="'your_template.html'"></div>


    <script type="text/ng-template" id="your_template.html">
          {{name}}
    </script>
  </div>

Answer 3

Making a generic directive instead of ng-include is a cleaner solution: Angular passing scope to ng-include

Answer 4

It's a little hacky, but I am passing variables to an ng-include with an ng-repeat of an array containing a JSON object :

<div ng-repeat="pass in [{'text':'hello'}]" ng-include="'includepage.html'"></div>

In your include page you can access your variable like this:

<p>{{pass.text}}</p>