AngularJS - trên nút bấm các mẫu div tổ

Question

Tôi đang làm việc trên một mô-đun nơi tôi sẽ có các phần tử div được lồng trong các phần tử div cũng có thể được lồng trong các phần tử div. Các phần tử div này sẽ được tạo bởi người dùng khi họ nhấp vào nút. Các div có thể sẽ trông như vậy:

1. div1

   1.1. div2

   1.2. div3

   1.3. div4

   1.3.1 div5 
   
       1.3.2 div6 
   

2.div7

3.div8

và vân vân ...

Mỗi divs sẽ chỉ đơn giản là một mẫu html và tôi muốn để ràng buộc dữ liệu cho từng div này, giả sử div có tiêu đề và vì vậy tôi sẽ ràng buộc từng div.

Kế hoạch hành động đầu tiên của tôi là sử dụng ng-include và chỉ cần tạo ng-bao gồm động bởi người dùng và theo cách đó các mẫu sẽ được tải bởi ng-include. Tuy nhiên, như tôi đã phát hiện ra, lồng nhau ng-bao gồm là không thể do các vấn đề phụ thuộc.

Tôi biết các thư viện được người dùng nấu bằng cách cố gắng hack theo cách của họ xung quanh làm tổ của ng-include nhưng tôi đang tìm cách thực hành tốt các mẫu lồng nhau, trong khi tránh xa các thư viện bổ sung.

Bất kỳ đề xuất nào về cách tốt nhất để tạo mẫu động?

Answer 1

Từ những gì tôi hiểu, tôi sẽ làm điều này để thực hiện một div bên trong một div trên nút bấm:

function whenclicked(divid){ 
document.getElementById(divid).innerHTML = "<div id='currentdiv2'>whatever</div>"; 
//the variable 'divid' is the id of the current div you want a new div to be nested inside of 
} 

hy vọng sẽ giúp IT! :)

EDIT: Tôi biết rằng một số người nói .innerHTML là xấu thực hành, nhưng nó là cách dễ nhất và duy nhất tôi biết làm một điều như vậy, và nó hoạt động tốt đối với tôi trong tất cả các trình duyệt ...

Answer 2

Những gì tôi hiểu là bạn muốn sử dụng một mẫu với ng-bao gồm một cách đệ quy (Hope tôi hiểu tốt nhu cầu của bạn)

tôi làm cho bạn một jsfiddle để chỉ cho bạn cách tôi đang làm nó: http://jsfiddle.net/Mm32t/3/

Dưới đây, mã jsfiddle:

JS:

function myCtrl($scope) 
{ 
    $scope.data = [ 
     { 
      title: "N°1 - first level", 
      nodes: [ 
       { 
        title: "N°1 - second level", 
       }, 
       { 
        title: "N°2 - second level", 
        nodes: [ 
         { 
          title: "N°1 - third level", 
         }, 
         { 
          title: "N°2 - third level", 
         }, 
        ], 
       }, 
      ], 
     }, 
     { 
      title: "N°2 - first level", 
     }, 
    ]; 
} 

HTML:

<script type="text/ng-template" id="common_template"> 
    <ul> 
     <li data-ng-repeat="node in nodes"> 
      <h6>{{node.title}}</h6> 
      <div data-ng-show="node.nodes" data-ng-include="'common_template'" data-ng-init="nodes = node.nodes"></div><!-- The best here is to use data-ui-if insted of data-ng-show but it require angular-ui--> 
     </li> 
    </ul> 
</script> 

<div data-ng-controller="myCtrl" data-ng-include="'common_template'" data-ng-init="nodes = data"></div>