Recursive templates for Angularjs Solutions

Accordion Mode Menu:

In the project we will encounter the unknown level of JSON data, need the front-end staff to traverse the generation view view, in this case we will use the recursive method.

The DOM structure in the ANGULARJS can also iterate through the data in a recursive way.

<ul side-navigation class= "nav metismenu" ng-include= "' navigations '" id= "Side-menu" ></ul><script id= " Navigations "type=" text/ng-template "> <li ng-repeat=" navs in functiongroups "><a href=" {{ Navs.functionpoint}} "><span class=" Nav-label ">{{navs.name}}</span><span ng-if=" Navs.children.length "class=" FA Arrow "></span></a> <ul ng-if=" navs.children.length "ng-include=" ' Navigations ' "class=" nav nav-second-level "ng-init=" Functiongroups=navs.children "></ul> </li></ Script>

Another way to take instructions: (not tested)

Angular.module (' demo '). directive (' recursion ', function ($compile) {     function  Cpl (Element, link) {        // normalize the link  parameter        if (angular.isfunction (link)) {             link = { post: link };         }         // break  the recursion loop by removing the contents         var contents = element.contents (). Remove ();         var compiledcontents;        return {             pre:  (link &&  Link.pre) &NBSP;?&NBSP;LINK.Pre : null,            /**              * Compiles and re-adds  the contents             */             post: function (scope, element) {                 // compile  the contents                 if (!compiledcontents) {                     compiledContents =  $compile (contents);                 }          &nbSp;      // re-add the compiled contents to the  element                 Compiledcontents (Scope, function (clone) {                     element.append (clone);                 });                  // Call the  post-linking function, if any                 if (link && link.post) {                     link.post.apply (NULL,  arguments);                 }             }        };    }         return {         Restrict: ' A ',         scope: {recursion: ' = '},         template:  ' <li ng-repeat= ' item in recursion >                          <a href= "{item.cateid}}.html" >{{item.cateName}}</a>                          <ul recursion= "Item.child" >                         </ul>                     </li> ',         compile: function (Element) {              return cpl (Element, function (Scope, iElement, &NBSP;IATTRS,&NBSP;CONTROLLER,&NBSP;TRANSCLUDEFN) {                 // define your normal link function here.                 //  alternative: instead of passing a function,                 // you can also pass an  object with                // a  ' pre '-  and  ' Post '-link function.            });         }    };});

This article is from the "Egg" blog, please be sure to keep this source http://yh118.blog.51cto.com/8638176/1945954

Recursive templates for Angularjs Solutions