Question

我想创建一个指令，它将采用树状数据并将其提供给某些树视图脚本（使用标记作为输入），使用特定的HTML模板来呈现节点。因此，指令将数据+节点模板作为输入，插入DOM子树，然后调用第三方插件使其可排序（http://dbushell.github.com/Nestable/在我的脑海中，如果这很重要的话。）

我有一个解决方案，但它远非优雅。这是HTML代码（完整样本可以在http://jsfiddle.net/DQjve/找到）：

<div ng-app="TestApp" ng-controller="TestCtrl">
    <script type="text/ng-template" id="tree.html">
        <div>
            <ng-include src="'branch.html'"></ng-include>
        </div>
    </script>

    <script type="text/ng-template" id="branch.html">
        <ul>
            <li ng-repeat="leaf in leaf.children" ng-include src="'leaf.html'">
            </li>
        </ul>
    </script>

    <script type="text/ng-template" id="leaf.html">
        <ng-include src="template"></ng-include>
        <ng-include src="'branch.html'"></ng-include>
    </script>

    <script type="text/ng-template" id="my-leaf.html">
        <span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
    </script>

    <tree root="tree" template="my-leaf.html"></tree>
</div>

所需代码如下所示：

<div ng-app="TestApp" ng-controller="TestCtrl">
    <tree root="tree" template="my-leaf.html">
        <span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
    </tree>
</div>

目标：

（不太重要）将所有实用程序模板放在指令JavaScript代码中。
（更重要）使用＆lt; tree＆gt;的内容标记为节点模板。

但我找不到解决方案。

对于第1点：可能我需要使用$templateCache预先缓存我的模板？有一些独特的模板名称？有没有更好的解决方案？

对于第2点：我应该使用ngTransclude作为第2页吗？如果有，怎么样？有没有办法获取初始＆lt;树＆gt;的内容？在任何编译发生之前标记为字符串？

AngularJS中的树视图，具有可自定义的节点模板

0 个答案: