javascript - Angular 递归

Question

有两种方法可以创建 Angular 递归

第一种使用$compile函数，手动编译内容

---

链接:Angularjs: understanding a recursive directive

compile: function(tElement, tAttr) {
        var contents = tElement.contents().remove();
        var compiledContents;
        return function(scope, iElement, iAttr) {
            if(!compiledContents) {
                compiledContents = $compile(contents);
            }
            compiledContents(scope, function(clone, scope) {
                     iElement.append(clone); 
            });
        };
    },

示例:http://jsfiddle.net/n8dPm/

---

第二个使用 ng-include

链接:https://groups.google.com/forum/?fromgroups=#!topic/angular/TbpjE-5XEM0

<script type="text/ng-template"  id="tree_item_renderer.html">
{{data.name}}
<button ng-click="add(data)">Add node</button>
<button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
<ul>
    <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
</ul>

示例:http://jsfiddle.net/brendanowen/uXbn6/8/

---

我的问题是:两者的优缺点是什么是否可以在 ng-include 中使用包含自定义指令的模板？

Answer 1

我相信您错过了两个有值(value)的选择。

• 在指令模板中使用自定义指令(是的，你可以这样做)
• 使用嵌入 ( https://egghead.io/lessons/angularjs-transclusion-basics ) 使模板的一部分在使用指令时可配置。事实上，这与您的第一个示例所做的一样，但更简单。