将参数传递给Angular ng-include [英] Pass parameter to Angular ng-include
问题描述
我正在尝试显示元素的二叉树,并使用ng-include递归地进行遍历.
I am trying to display a binary tree of elements, which I go through recursively with ng-include.
ng-init="item = item.left"
和ng-repeat="item in item.left"
有什么区别?
在此示例中,它的行为完全相同,但是我在项目中使用了类似的代码,因此它的行为有所不同.我想是因为角度范围.
也许我不应该使用ng-if,请向我解释如何做得更好.
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.
pane.html是:
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>
控制器为:
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);
}
});
首先,我遇到一个问题,即指令ng-repeat的优先级高于ng-if.我试图将它们合并,但失败了.海事组织(IMO)奇怪的是ng-repeat主导ng-if.
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.
推荐答案
将参数传递给Angular ng-include
Pass parameter to Angular ng-include
您不需要.所有ng-include
的源都具有相同的控制器.因此,每个视图看到的都是相同的数据.
You don't need that. all ng-include
's sources have the same controller. So each view sees the same data.
ng-init ="item = item.left"和ng-repeat ="item.left"中的项目有什么区别
What is the difference between ng-init="item = item.left" and ng-repeat="item in item.left"
[ 1 ]
ng-init="item = item.left"
的意思是-创建名为item.left
的名为item的新实例.换句话说,您可以通过编写控制器来实现相同目的:
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"
表示基于item.left
数组创建范围的列表.您应该知道ng-repeat
中的每个项目都有其专用范围
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
我正在尝试显示元素的二叉树,并使用ng-include递归地进行遍历.
I am trying to display a binary tree of elements, which I go through recursively with ng-include.
我在过去的答案中发布了如何使用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
此处创建的主要部分是 Node ,其中id
由<scipt>
标签包裹并使用ng-repeat
:
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>
这篇关于将参数传递给Angular ng-include的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!