Angularjs：理解递归指令

我在这里找到了一个很棒的树指令。原来的：http://jsfiddle.net/n8dPm/ http://jsfiddle.net/n8dPm/

我一直试图通过其他几个问题来理解它的功能，1 https://stackoverflow.com/questions/19120386/angularjs-transclude-directive-template,2 https://stackoverflow.com/questions/19124986/angularjs-attaching-a-click-event-in-directive。我不太明白渲染树指令的递归调用是如何工作的。主要是编译功能

1. 所有compile函数什么时候调用？
2. $compile函数什么时候缓存在变量中compiledContents（这是链接函数吗？），什么时候追加？为什么不总是追加？

--

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); 
                });
            };
        },

Ng 网站有一些很棒的文档（我认为其中一些是最好的）。启动和运行时循环的概述非常有帮助：http://docs.angularjs.org/guide/concepts http://docs.angularjs.org/guide/concepts

在较高的层面上，当 Ng 第一次启动时，它会从 ng-app 所在的位置开始编译 DOM（就像 Ng 的另一个指令一样）。这意味着它会遍历元素并查找链接到 $rootScope 所需的指令和表达式（所有作用域的根，是编译/链接过程设置的原型继承链的一部分）。如果它是一个指令，编译过程也会对其进行。编译过程会获取在 HTML 中找到的所有 Ng 指令，并根据分配的优先级对它们进行优先级排序，或者假设优先级为零。当它们全部排序后，它会执行返回链接函数的指令的编译函数。在上面的示例中，有两个显示链接函数，我将在下面对其进行注释以及将其链接到此说明的其他注释。链接函数还以嵌入对象的形式给出指令所在元素中的 HTML，该元素是属性、类或元素。

执行链接函数，链接作用域和指令并生成视图。这可能包括 HTML/transclude，因此可以将其添加到指令模板中的指令 ng-transclude 所在的位置（该指令将应用相同的过程，其模板是嵌入）。

以下是我对上面稍微修正的自定义指令的注释：

module.directive("tree", function($compile) {
    //Here is the Directive Definition Object being returned 
    //which is one of the two options for creating a custom directive
    //http://docs.angularjs.org/guide/directive
    return {
        restrict: "E",
        //We are stating here the HTML in the element the directive is applied to is going to be given to
        //the template with a ng-transclude directive to be compiled when processing the directive
        transclude: true,
        scope: {family: '='},
        template:       
            '<ul>' + 
                //Here we have one of the ng-transclude directives that will be give the HTML in the 
                //element the directive is applied to
                '<li ng-transclude></li>' +
                '<li ng-repeat="child in family.children">' +
                    //Here is another ng-transclude directive which will be given the same transclude HTML as
                    //above instance
                    //Notice that there is also another directive, 'tree', which is same type of directive this 
                    //template belongs to.  So the directive in the template will handle the ng-transclude 
                    //applied to the div as the transclude for the recursive compile call to the tree 
                    //directive.  The recursion will end when the ng-repeat above has no children to 
                    //walkthrough.  In other words, when we hit a leaf.
                    '<tree family="child"><div ng-transclude></div></tree>' +
                '</li>' +
            '</ul>',
        compile: function(tElement, tAttr, transclude) {
            //We are removing the contents/innerHTML from the element we are going to be applying the 
            //directive to and saving it to adding it below to the $compile call as the template
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {

                if(!compiledContents) {
                    //Get the link function with the contents frome top level template with 
                    //the transclude
                    compiledContents = $compile(contents, transclude);
                }
                //Call the link function to link the given scope and
                //a Clone Attach Function, http://docs.angularjs.org/api/ng.$compile :
                // "Calling the linking function returns the element of the template. 
                //    It is either the original element passed in, 
                //    or the clone of the element if the cloneAttachFn is provided."
                compiledContents(scope, function(clone, scope) {
                        //Appending the cloned template to the instance element, "iElement", 
                        //on which the directive is to used.
                         iElement.append(clone); 
                });
            };
        }
    };
});

整个工作正常：http://jsfiddle.net/DsvX6/7/ http://jsfiddle.net/DsvX6/7/