Pass parameter to Angular ng-include
angularjs, angularjs-ng-include, angularjs-ng-init, angularjs-ng-repeat, javascript
Solution
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>
Problem
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.