Solving the recursive instruction problem of angular

After midnight can't sleep, keep a record of the problems that were encountered at work yesterday.

A recursive instruction was written for the needs of the project. This thing actually caused Chrome to feign death. Looks so serious, even forced to quit is not good for me to restart the computer.

A brief introduction to the background:

The first is a tree-like data structure, about this:

{    id:xx,    children:{        id:yy,        children:{...    }}}

Want to display this data on the page, the general idea is to write an instruction, the template is about this appearance (assuming the name of the directive is nodedirective.）：

<div>    <label>{{node.id}}</label>    <div ng-if= "node.children.length>0" >        <ul>            <li ng-repeat= "child in Node.children" >                <node-directive node= "Child" ></ node-directive>            </li>        </ul>    </div></div>

Code for the directive:

Angular.module (' module ', []). directive (' nodedirective ', ..., function () {    return {        restrict: ' E ',        scope: {node: ' = '},        link:function (scope,elem,attrs) {            //do something.}}}    );

There seems to be no God horse problem, the next step of course is to refresh the browser page, and then ... It's dead, and Chrome's dead. At first it was a question of chrome that opened too many tabs, and doubted that it was a Mac system, thinking it was not windows and how it crashed. Well, it turned out that I was paranoid and wronged them both.

This is a bug that angular compiles a recursive instruction. Simple verification: The recursive HTML code to comment out, and then refresh the browser page, as expected normal display! Actually can make this kind of mistake, first despise a bit angularjs.

After all, I was using angular's first brother, encountered this problem, can only help Google, found two solutions:

1. Http://stackoverflow.com/questions/14430655/recursion-in-angular-directives

This scheme was found in the great StackOverflow, and the concrete steps were:

Add a recursionhelper.js First:

Module.factory (' Recursionhelper ', [' $compile ', function ($compile) {return {/** * manually compiles the         element, fixing the recursion loop. * @param element * @param [link] A post-link function, or an object with function (s) registered via pre and post P         Roperties.         * @returns An object containing the linking functions. */compile:function (element, link) {//Normalize the link parameter if (Angular.isfunction (li            NK) {link = {Post:link};            }//Break the recursion loop by removing the contents var contents = element.contents (). remove ();            var compiledcontents; return {pre: (link && link.pre)? Link.pre:null,/** * compiles a nd re-adds the contents */post:function (scope, Element) {//Compile th E contents if (!compiledcontents) {compiledcontents = $compile (contents); }//Re-add the compiled contents to the element compiledcontents (scope, function (CL                    One) {element.append (clone);                    }); Call the Post-linking function, if any if (link && link.post) {Link.po                    St.apply (null, arguments);        }                }            }; }    };}]);

Then add the compile method to the original instruction, and pass the previous link method as a parameter:

Angular.module (' module ', []). directive (' nodedirective ', ..., function () {     return {        restrict: ' E ',        scope: {node: ' = '},        compile:function (Element) {                        return Recursionhelper.compile (element,function (Scope, Elem, attr) {                //do something.});}}    );

2. http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/

The idea of this scenario is to not use recursive instructions and then modify the current element in the link method to increase the child node (this node is the one previously used recursively). It can be said that the curve to the salvation.

Template modified to:

<div>    <label>{{node.id}}</label></div>

The instruction is modified to:

Angular.module (' module ', []). directive (", ..., function () {    return {        restrict: ' E ',        scope:{node: ' = '},        link:function (scope,elem,attrs) {            if (Angular.isarray (Scope.node.children)) {                    elem.append ("                   < ul>                     <li ng-repeat= "child in Node.children" >                     <node-directive node= "Child" ></ node-directive>                    </li>                   </ul>                  ");                  $compile (Elem.contents ()) (scope)             }           //Do something.}}    );

Personal preference for the first scenario. The second option is to modify the DOM through code, which is not elegant and should be avoided as much as possible.

I solved the problem with the first solution, but one afternoon has passed.

Solving the recursive instruction problem of angular