user59442 user59442 - 6 months ago 26
AngularJS Question

Pass parameter to Angular ng-include

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"
and
ng-repeat="item in item.left"
?
In this example it behaves exactly the same, but I use similiar code in a project and there it behaves differently. I suppose it's because of Angular scopes.
Maybe I shouldn't use ng-if, please explain me how to do it better.

The pane.html is:

<div ng-if="!isArray(item.left)">
<div ng-repeat="item in [item.left]" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.left)">
{{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
<div ng-repeat="item in [item.right]" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.right)">
{{item.right[0]}}
</div>

<div ng-if="!isArray(item.left)">
<div ng-init = "item = item.left" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.left)">
{{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
<div ng-init="item = item.right" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.right)">
{{item.right[0]}}
</div>


The controller is:

var app = angular.module('mycontrollers', []);

app.controller('MainCtrl', function ($scope) {

$scope.tree = {
left: {
left: ["leftleft"],
right: {
left: ["leftrightleft"],
right: ["leftrightright"]
}
},
right: {
left: ["rightleft"],
right: ["rightright"]
}
};

$scope.isArray = function (item) {
return Array.isArray(item);
}
});


EDIT:
First I run into the problem that the directive ng-repeat has a greater priority than ng-if. I tried to combine them, which failed. IMO it's strange that ng-repeat dominates ng-if.

Answer

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>