将parameter passing给Angular ng-include

我正试图显示一个元素的二叉树,我通过ng-includerecursion地进行。

ng-init="item = item.left"ng-repeat="item in item.left"什么ng-repeat="item in item.left" ? 在这个例子中,它的行为完全一样,但是我在项目中使用了类似的代码,并且在那里的行为有所不同。 我想这是因为angular度范围。 也许我不应该用ng-if,请解释一下如何做得更好。

pane.html是:

 <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。 我试图把它们结合起来,失败了。 国际海事组织奇怪的是,ng-repeat主宰ng-if。

将parameter passing给Angular ng-include

你不需要那个。 所有ng-include的源代码都有相同的控制器。 所以每个视图都看到相同的数据。

ng-init =“item = item.left”和ng-repeat =“item.left中的项目”有什么区别?

[ 1 ]

ng-init="item = item.left"意思是 – 创build一个名为item的新实例,它等于item.left 。 换句话说,通过在控制器中写入来达到同样的目的:

 $scope.item = $scope.item.left 

[2]

ng-repeat="item in item.left"表示根据item.left数组创build范围列表。 您应该知道ng-repeat中的每个项目都有它的私有范围


我正试图显示一个元素的二叉树,我通过ng-includerecursion地进行。

我在过去的post中回答了如何使用ng-include显示树。

它可能会有帮助: 怎么做,显示一个可折叠的树

这里的主要部分是用<scipt>标签包装并使用ng-repeat创buildid Node

  <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> 

这是一个有点hacky,但我传递variablesng-include ng-repeat包含一个JSON对象的数组:

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

在你的包含页面中,你可以像这样访问你的variables:

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

使用generics指令而不是ng-include是一个更清洁的解决scheme: 将范围angular度传递给ng-include

http://tech.fongmun.com/post/131863914487/scoping-variables-in-ng-include-without-ng-repeat

我正在使用ng-include包含string的数组的ng-repeat。 如果你想发送多个数据,所以请看Junus Ergin的答案。

看我的代码片段:

 <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>