कोणीय जेएस - बटन पर नेस्ट div टेम्पलेट्स पर क्लिक करें

Question

मैं एक मॉड्यूल पर काम कर रहा हूं जहां मेरे पास div तत्व होंगे जो div तत्वों में घोंसले हैं जिन्हें div तत्वों में भी घोंसला दिया जा सकता है। जब वे एक बटन पर क्लिक करते हैं तो ये div तत्व उपयोगकर्ता द्वारा बनाए जाएंगे। divs इसलिए की तरह लग रही अंत हो सकता है:

1. div1

   1.1। div2

   1.2। div3

   1.3। Div4

   1.3.1 div5 
   
       1.3.2 div6 
   

2.div7

3.div8

और बहुत आगे है ...

इन divs के प्रत्येक बस एक एचटीएमएल टेम्पलेट हो जाएगा और मैं बाध्य करने के लिए चाहते हैं इन divs में से प्रत्येक के लिए डेटा, कहते हैं कि div का शीर्षक है, और इसलिए मैं प्रत्येक div को बांध दूंगा।

मेरी पहली कार्यवाही का उपयोग एनजी- शामिल करना था और उपयोगकर्ता द्वारा गतिशील रूप से एनजी-शामिल करना शामिल था और इस तरह टेम्पलेट्स एनजी-शामिल द्वारा लोड किए जाएंगे। हालांकि, जैसा कि मैंने पाया है, घोंसला एनजी-निर्भरता मुद्दों के कारण संभव नहीं है।

मुझे उन पुस्तकालयों के बारे में पता है जो उपयोगकर्ताओं द्वारा पकाए जाते हैं जो एनजी के घोंसले के आसपास अपना रास्ता हैक करने की कोशिश करते हैं, लेकिन मैं अतिरिक्त पुस्तकालयों से दूर रहते हुए घोंसले टेम्पलेट्स का एक अच्छा अभ्यास ढूंढ रहा हूं।

डायनामिक रूप से घोंसला टेम्पलेट्स का सबसे अच्छा तरीका क्या होगा?

Answer 1

मैं क्या समझ से, मैं बटन पर क्लिक एक 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 बुरा व्यवहार है, लेकिन इसके लिए सबसे आसान और एक ही रास्ता मैं ऐसी बात कर रही है के बारे में पता है, और यह सभी ब्राउज़रों में मेरे लिए ठीक काम करता है ...

पता

Answer 2

मुझे क्या समझते हैं कि आप के साथ एक टेम्पलेट का उपयोग करना चाहते है एक पुनरावर्ती रास्ता (आशा मैं अच्छी तरह से समझ अपनी आवश्यकताओं)

मैं तुम्हें एक jsfiddle आप को दिखाने के लिए किया जाता में एनजी-शामिल मैं इसे कैसे कर रहा हूँ: http://jsfiddle.net/Mm32t/3/

नीचे, jsfiddle कोड:

जे एस:

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>