将参数传递给Angular ng-include

Question

我试图显示元素的二叉树,我用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.

Answer 1

将参数传递给Angular ng-include

你不需要那个.所有ng-include的来源都有相同的控制器.因此每个视图都看到相同的数据.

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

[ 1 ]

ng-init="item = item.left"表示 - 创建等于的新实例命名项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>

Answer 2

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

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

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

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

Answer 3

制定通用指令而不是ng-include是一个更清晰的解决方案: Angular将范围传递给ng-include