AngularJS - 在按鈕上點擊嵌套div模板

我正在一個模塊中，我將div元素嵌套在div元素中，也可能嵌套在div元素中。這些div元素將由用戶在單擊按鈕時創建。的div最終可能看起來像這樣：AngularJS - 在按鈕上點擊嵌套div模板

DIV1

1.1。 div2

1.2。 div3

1.3。 DIV4
```
1.3.1 div5 

    1.3.2 div6 
```

2.div7

3.div8

等等...

每這些div的將僅僅是一個HTML模板，我想綁定每個div的數據，比如說div有一個標題，所以我會綁定每個div。

我的第一個行動計劃是使用ng-include，並簡單地由用戶動態創建ng-includes，這樣模板將由ng-include加載。但是，正如我所發現的，由於依賴性問題，嵌套ng-includes不可能。

我知道用戶嘗試破解嵌套ng-includes的圖書館，但我正在尋找嵌套模板的好習慣，同時遠離額外的庫。

什麼是動態嵌套模板的最佳方式的任何建議？

來源

2013-06-30 Georgi Angelov

https：//開頭github上。com/angular-ui/ui-router也許 – akonsu

@akonsu，謝謝，但正如我所解釋的，我正在尋找一種單獨使用AngularJS的解決方法，例如使用不同的工具進行模板化，而不是ng-include –

1. Are每個'div'的模板都一樣？ 2.如果沒有，是否有一個標準確定哪個模板需要與哪個'div'關聯？ – callmekatootie

據我瞭解，我將這樣做是爲了一個div內一個div按鈕點擊：

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 
}

希望它能幫助！ :)

編輯：我知道有些人說.innerHTML是不好的做法，但我知道做這樣的事的最簡單，只有這樣，它工作正常，我在所有的瀏覽器...

來源

2013-07-08 21:03:55 edwardtyl

我的理解是你想要使用的模板NG-包括以遞歸的方式（希望我理解以及你的需求）

我做你的jsfiddle來告訴你我是如何做的：http://jsfiddle.net/Mm32t/3/

下面，jsfddle代碼：

個

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>

來源

2013-07-12 17:05:07 Gabriel

AngularJS - 在按鈕上點擊嵌套div模板

回答

相關問題