Question

我有3个模板： - 渲染一些基本内容的主要模板， - 渲染整棵树的第二个模板 - 应该呈现该树的每个元素的第三个模板

当我包含row_renderer.html时，我的变量名为subItem在包含的模板中不可见。当我将该模板复制到名为nodes_renderer.html的第二个模板时，一切似乎都很好。

如何将subItem变量传递给row_renderer.html？

主要模板

    {% verbatim %}
    <div ui-tree data-drag-enabled="false" class="">
        <ol ui-tree-nodes="" ng-model="list">
            <li ng-repeat="item in list" ui-tree-node class="table">
                <div ui-tree-handle class="header row" data-toggle="collapse">
                    <div class="col-sm-4 col-md-2" style="">
                        <input type="checkbox" />
                        {{item.name}} ({{item.submission_count}})
                    </div>
                    <div class="col-sm-4 col-md-2">
                        <i class="icon" ng-class="{'icon-chevron-right': collapsed, 'icon-chevron-down': !collapsed}"></i>
                        {{item.last_submission_date}}
                    </div>
                    <div class="col-md-6">
                        <a href="#" class="action-button"><i class="icon icon-file"></i> Pobierz raport</a>
                        <a href="#" class="action-button"><i class="icon icon-times"></i> Zakończ zgłoszenie</a>
                        <a href="#" class="action-button"><i class="icon icon-envelope"></i> Wyślij SMS</a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <ol ui-tree-nodes="" ng-model="item.children">
                    <li ng-repeat="subItem in item.children" ui-tree-node ng-include="'nodes_renderer.html'">

                    </li>
                </ol>
            </li>
        </ol>
    </div>
    {% endverbatim %}

主模板的最后一个片段：

                <ol ui-tree-nodes="" ng-model="item.children">
                    <li ng-repeat="subItem in item.children" ui-tree-node ng-include="'nodes_renderer.html'">

                    </li>
                </ol>

nodes_renderer.html

    {% verbatim %}
    <script type="text/ng-template" id="nodes_renderer.html">
        <div ui-tree-handle class="row" ng-include="'row_renderer.html'" >

        <ol ui-tree-nodes="" ng-model="subItem.children">
        <li ng-repeat="subItem in subItem.children" ui-tree-node ng-include="'nodes_renderer.html'">
        </li>
        </ol>
        </div>
    </script>
    {% endverbatim %}

row_renderer.html - 可重复使用的模板

   <script type="text/ng-template" id="row_renderer.html">

        <div class="clearfix"></div>
        <div class="col-md-12" >
        Rodzaj Awarii: {{subItem.type_name}}
        </div>
        <div class="clearfix"></div>
        <div class="col-sm-4 col-md-2">
        <input type="checkbox" />
        {{subItem.name}} ({{subItem.submission_count}})
        </div>
        <div class="col-sm-4 col-md-2">
        <i class="icon" ng-if="subItem.children" ng-class="{'icon-chevron-right': collapsed, 'icon-chevron-down': !collapsed}"></i>
        {{subItem.last_submission_date}}
        </div>
        <div class="col-sm-4 col-md-2">
        <a href="#"><i class="icon icon-star"></i> Przypisz do mnie</a>
        </div>
        <div class="col-md-6">
        <a href="#" class="action-button"><i class="icon icon-file"></i> Pobierz raport</a>
        <a href="#" class="action-button"><i class="icon icon-times"></i> Zakończ zgłoszenie</a>
        <a href="#" class="action-button"><i class="icon icon-envelope"></i> Wyślij SMS</a>
        </div>
        <div class="clearfix"></div>
        </div>
    </script>

Answer 1

ng-repeat为每个元素创建一个新范围，ng-include也会创建一个新范围。

对于nodes_renderer.html，您在指定subItem时使用来自父作用域继承的ng-repeat="subItem in item.children"。这就是为什么它适用于nodes_renderer.html

如何将subItem变量传递给row_renderer.html？

尝试onload="subItem=$parent.PropertyToPass"：

<div ui-tree-handle class="row" ng-include="'row_renderer.html'" onload="subItem=$parent.PropertyToPass">

有关详细信息：How to get parent element inside ng-include when iterating in ng-repeat recursively

Angular.js - 在模板中包含模板片段

1 个答案: