AngularJS

Question

के साथ डेटा लोड करने के लिए एक मोडल विंडो बनाना I AngularJS का उपयोग करके एक मोडल विंडो के अंदर डेटा लोड करने का प्रयास कर रहा है लेकिन मुझे यकीन नहीं है कि यह कैसे करें। लिंक को क्लिक करने के बाद मुझे एक नया पृष्ठ लोड करने के बजाय एक मोडल विंडो के अंदर लोड करने के लिए यूआरएल को भी बदलने की आवश्यकता है।

मैंने jQuery फेसबॉक्स प्लगइन का उपयोग करने का प्रयास किया है लेकिन यह काम नहीं करता है, मैं ट्विटर बूटस्ट्रैप मोडल घटक का भी उपयोग कर रहा हूं।

<div class="subnav span12" id="post-main-container" ng-controller="PostsController"> 
    <div class="btn-group pull-left span5" id="sort-nav"> 
    <a class="btn active">Popular</a> 
    <a class="btn">Recent</a> 
    <a class="btn">Favorite</a> 
    </div> 
    <div class="btn-group pull-right " id="view-nav"> 
    <a class="btn" id="2col"><i class="icon-th-large"></i></a> 
    <a class="btn active" id="4col"><i class="icon-th"></i></a> 
    <a class="btn" id="6col"><i class="icon-th-list"></i></a> 
    </div> 
    <div class="btn-group pull-right"> 
    <a id="reload" class="btn"><i class="icon-refresh"></i></a> 
    <a class="btn"><i class="icon-random"></i></a> 
    </div> 
    <div class="row-fluid span12" id="img-container"> 
    <ul class="unstyled" id="image-container"> 
     <li class="post-container box2" ng-repeat="post in posts"> 
     <div class="post-btns" style="display:none;"> 
      <a class="btn btn-mini" href="#">Share</a> 
      <a class="btn btn-mini" href="#">Add</a> 
     </div> 
     <a href="#/posts/{{post.id}}"> 
      <img ng-src="{{post.image}}"> 
     </a> 
     <p class="post-snippet" style="display:none;">{{post.description}}</p> 
     </li> 
    </ul> 
    </div> 
</div> 

मैं मोडल विंडो "#/posts/{{post.id}}" लोड करना चाहते हैं:

नीचे मेरी कोड है।

Answer 1

सुनिश्चित नहीं है कि यह आपकी समस्या को पूरी तरह से हल करेगा, लेकिन हमारे पास http://angular-ui.github.com/ पर बूटस्ट्रैप मोडल का निर्देशक रैपर है। चूंकि आप अपने पेज में अपने divs को परिभाषित कर रहे हैं, दो-तरफा डेटा बाध्यकारी सिर्फ काम करना चाहिए। बदलने के लिए यूआरएल लिंक के संबंध में, मुझे यकीन नहीं है कि आप इसे क्यों चाहते हैं क्योंकि यह एक मोडल नियंत्रण है।

कोणीय-ui समूह मोडल के लिए जे एस और कुछ अन्य बूटस्ट्रैप नियंत्रणों को देखने here

दान

Answer 2

कोणीय तरह से दृश्य मॉडल देख रहा है और आप मॉडल को बदलने का एक AngularJS प्रतिस्थापन है:

• संवाद को मार्कअप में रखें।
• selectedPost जैसे कुछ के लिए संवाद की बाध्य सामग्री।
• लिंक पर क्लिक करने से केवल selectedPost बदलें और संवाद छुपाएं/दिखाएं।

यहाँ एक बहुत ही त्वरित संस्करण है: http://plnkr.co/edit/0fsRUp?p=preview

चेकआउट Angular UI, वे पहले से बूटस्ट्रैप के मॉडल के लिए एक घटक है।

Answer 3

यहां इसके लिए निर्देश बनाने का मेरा प्रयास है।

http://jsfiddle.net/tadchristiansen/gt92r/

उम्मीद है कि आप इसे उपयोगी पाते।

Answer 4

यदि आप Twitter BootStrap के मोडल का उपयोग करते हैं, this jsfiddle कोणीय घटकों को अलग रखता है, जो आपको केवल अपने मोडल के एचटीएमएल और उचित ढंग से स्किड बाइंडिंग के साथ आंशिक HTML फ़ाइल बनाने की अनुमति देता है।

इसका मतलब है आप अपने html में एलान के तौर पर एक Angular directive उपयोग कर सकते हैं:

<a my-popup-directive="partials/myModal.html">Open MyModal</a> 

संपादित: प्रति @ DanDoyon के (सही) टिप्पणी, निर्देश गैर ng नाम स्थान के लिए दिया गया था। अद्यतन: Bootstrap 3 modal का उपयोग कोणीय 1.x के साथ एक कस्टम निर्देश या angular-ui modal बहुत अनावश्यक बनाता है।