AngularJS ng-template樹形結構ng-template內

Question

我面臨我的代碼的邏輯問題： 我在我的AngularJS應用程序中使用modalbox（bootstrapUI）作爲ngTemplate。在ngTemplate裏面，我需要顯示一個嵌套的樹狀分層結構（這意味着我將不得不使用ngTemplate內ngTemplate

這裏是樹的數據的JSON結構：

{ 
"DROPBOX": { 
    "/": { 
     "name": "/", 
     "source": "DROPBOX", 
     "identifier": "none", 
     "children": { 
      "9 th grade class": { 
       "name": "9 th grade class", 
       "source": "DROPBOX", 
       "identifier": "046ec8907f797029735b293f2fed8df5", 
       "children": {} 
      }, 
      "Documents": { 
       "name": "Documents", 
       "source": "DROPBOX", 
       "identifier": "none", 
       "children": { 
        "test": { 
         "name": "test", 
         "source": "DROPBOX", 
         "identifier": "264854fc64d1e0d410e78e0488cab8b8", 
         "children": {} 
        } 
       } 
      }, 
      "Photos": { 
       "name": "Photos", 
       "source": "DROPBOX", 
       "identifier": "none", 
       "children": { 
        "Sample Album": { 
         "name": "Sample Album", 
         "source": "DROPBOX", 
         "identifier": "6024199d9d312ba8347f515675321564", 
         "children": {} 
        } 
       } 
      }, 
      "some folder with a very very very very very very very long name": { 
       "name": "some folder with a very very very very very very very long name", 
       "source": "DROPBOX", 
       "identifier": "700e932df5e5a678220b5e82e85dc2b2", 
       "children": {} 
      }, 
      "testhierarchy": { 
       "name": "testhierarchy", 
       "source": "DROPBOX", 
       "identifier": "none", 
       "children": { 
        "child": { 
         "name": "child", 
         "source": "DROPBOX", 
         "identifier": "748961a8a3502a48bd4082cd2c0339eb", 
         "children": {} 
        } 
       } 
      } 
     } 
    } 
} 

}

TL; DR的JSON被構造爲

data.dropbox - {name: 'example', children: [ {name: 'asd', ]}

所以我的幫助將非常感激。

Answer 1

這是像下面的東西。所以HTML：

/* this will be on your normal html */ 
<tree></tree> 

/* this is in the treeDirective.html and you bind to the inner scope. */ 
<tree></tree> 

的指令：

.directive("tree", function (RecursionHelper) { 
    return { 
     restrict: "E", 
     scope: { }, 
     replace: true, 
     templateUrl: './partials/treeDirective.html', 
     compile: function(element) { 
      return RecursionHelper.compile(element, function(scope, iElement, iAttrs, controller, 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. 
      }; 
     } 
    }; 
}) 

遞歸工廠。

.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 properties. 
      * @returns An object containing the linking functions. 
      */ 
     compile: function(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) ? link.pre : null, 
       /** 
        * Compiles and re-adds the contents 
        */ 
       post: function(scope, element) { 
        // Compile the contents 
        if (!compiledContents) { 
         compiledContents = $compile(contents); 
        } 
        // 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); 
        } 
       } 
      }; 
     } 
    }; 
}]); 

看看你是如何得到的。在指令上顯然你可以將任何東西放到該範圍上，那麼你將不得不編寫一些代碼來獲取子子代並將其設置爲範圍。