logo标签列表

传递参数给Angular ng-include

javascriptangularjsangularjs-ng-repeatangularjs-ng-includeangularjs-ng-init
54
我正在尝试使用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具有更高的优先级。我尝试将它们结合使用，但失败了。在我看来，ng-repeat支配ng-if很奇怪。

一个解决方案是创建一个新的指令，就像我在这个答案中所说的：http://stackoverflow.com/a/36916276/2516399 - smartmouse
4个回答
52

将参数传递给Angular ng-include

您不需要这样做。所有ng-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

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

需要翻译的内容已经是一个 HTML 标签，它表示一个段落（paragraph），在翻译过程中应该保留原样。
谢谢你的回答。非常有帮助。我会尝试编写一个类似于你的指令“'node'”和“'nodeTree'” 的指令。 - Johannes
52

虽然有点巧妙，但我正在使用ng-include传递变量，并在包含JSON对象的数组的ng-repeat中进行操作：

<div ng-repeat="pass in [{'text':'hello'}]" ng-include="'includepage.html'"></div>
在您的包含页面中，您可以像这样访问您的变量：
<p>{{pass.text}}</p>
10
肯定有点取巧，但我完全会使用它！ - Software Prophets
#MEGA。对于长期来说不是最好的选择，但是在我进行大规模重构时非常方便。 - Jamadan
1
这是什么黑魔法？！ 它如此简单，以至于我无法相信我以前没有想到过。 我需要从单个对象显示多个联系人，并且联系人视图已提取到模板HTML中，但是将每个联系人传递而不进行硬编码一直困扰着我。感谢您的帮助！ - Stephan
@Jamadan，从你的角度来看，哪些选项对长期来说更好？ :) - hellouworld
@hellouworld - 哈哈，我都不记得我在这里做什么项目了。我好像从那以后就没写过Angular了！我模糊地记得更新了一些从我的API返回的数据结构，以便我不需要这样做。抱歉帮不上更多忙。 - Jamadan
5
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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接