52

我正在尝试显示一个元素的二叉树，我使用 ng-include 递归地遍历它。

ng-init="item = 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 具有更高优先级的问题。我试图将它们结合起来，但失败了。IMO 奇怪的是 ng-repeat 支配 ng-if。

4

4 回答 4

50

将参数传递给 Angular ng-include

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

ng-init="item = item.left" 和 ng-repeat="item in item.left" 有什么区别

[ 1 ]

ng-init="item = item.left"意味着 - 创建新的实例名为 item 等于item.left. 换句话说，您可以通过在控制器中编写来实现相同的目的：

$scope.item = $scope.item.left

[2]

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

我正在尝试显示一个元素的二叉树，我使用 ng-include 递归地遍历它。

我在过去的答案中发布了如何使用ng-include.

它可能会有所帮助： how-do-display-a-collapsible-tree

这里的主要部分是您创建带有标签包装的节点并使用：id<scipt>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>

于 2014-08-29T09:57:21.010 回答
49

这有点 hacky，但我将变量传递给 ng-include，其中包含一个包含 JSON 对象的数组的 ng-repeat：

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

在您的包含页面中，您可以像这样访问您的变量：

<p>{{pass.text}}</p>
于 2015-12-01T11:42:43.793 回答
5

制作通用指令而不是 ng-include 是一种更清洁的解决方案： Angular 将范围传递给 ng-include

于 2015-12-03T11:32:08.403 回答
3

我正在将 ng-include 与包含字符串的数组的 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>

于 2016-11-29T05:38:19.737 回答