Angular Recursion

Angular Recursion

本文关键字:Recursion Angular      更新时间:2023-09-26

有两种方法可以在angular

中创建递归

第一个使用$compile函数并手动编译内容


链接:Angularjs:理解递归指令

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= # !主题/角度/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中使用包含自定义指令的模板?

我相信你错过了两个有价值的选择。

  • 在指令的模板中使用自定义指令(是的,你可以这样做)
  • 使用transclusion (https://egghead.io/lessons/angularjs-transclusion-basics)让模板的一部分在使用指令时可配置。实际上,这和第一个例子做的一样,但是更简单。