मॉड्यूल दिखाए जाने से पहले कोणीय यूआई मोडल खोला गया वादा हल हो गया है

Question

मैं फ़ील्ड में से किसी एक को jQuery UI Spinner में बदलने के लिए खुले मोडल पर एक jQuery स्क्रिप्ट निष्पादित करने का प्रयास कर रहा हूं।

मैं Angular UI में प्रलेखित opened वादा का उपयोग कर रहा हूं।

ISSUE: jQuery चयनकर्ता अपेक्षा के अनुसार काम नहीं करता है और कुछ भी पुनर्प्राप्त नहीं करता है।

तो मेरी नियंत्रक के कार्यों में से एक है कि तरह लग रहा है:

var modalInstance = $modal.open({ 
    templateUrl: 'modalDialog.html', 
    controller: modalCtrl, 
    resolve: { 
     noOfItems: function(){ 
      return $scope.noOfItems; 
     } 
    } 
}); 

modalInstance.opened 
    .then(function() { 
     $(".spinner").spinner({ 
      max: 20, 
      min: 1 
     }); 
    }); 

modalInstance.result 
    .then(function() { 
     console.log("modal closed"); 
    }); 

और मेरी HTML:

<script type="text/ng-template" id="modalDialog.html"> 
    <div class="modal-header"> 
     <h4 class="modal-title">My Modal</h4> 
    </div> 
    <div class="modal-body"> 
     <input class="form-control spinner" type="text" ng-model="noOfItems" /> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-default" ng-click="cancel()">Cancel</button> 
     <button class="btn btn-primary" ng-click="save()">Save</button> 
    </div> 
</script> 

modalCtrl अप्रासंगिक है।

संकेत: मैं एक debugger सही जब opened वादा कहा जाता है डाल करने की कोशिश की और मॉडल अभी तक नहीं खोला गया है पता चला।

एफवाईआई, मैं jQuery 1.9.0, jQuery यूआई 1.10.4, कोणीय जेएस 1.2.16 और कोणीय यूआई बूटस्ट्रैप v0.11 का उपयोग कर रहा हूं।

Answer 1

आप एक नियंत्रक से निम्न स्तर के डोम मैनिपुलेशन करने की कोशिश कर रहे गलत कोण से समस्या का सामना कर रहे हैं। यह AngularJS दुनिया में एक बड़ा नो-नो है और आप सड़क के नीचे आपको सभी प्रकार की परेशानी में डाल देंगे।

आपका यूआई तर्क किसी दिए गए डोम नोड को डीओएम पेड़ में जोड़ने के लिए "प्रतीक्षा" नहीं होना चाहिए बल्कि इसे घोषित रूप से व्यक्त किया जाना चाहिए। इस विशेष मामले में इसका मतलब है कि आप एक "स्लाइडर" निर्देश, के रूप में सरल कुछ लिखना चाहिए:

yourModule.directive('mySpinner', function() { 
    return { 
    link: function(scope, elm) { 
     elm.spinner({ 
     max: 20, 
     min: 1 
     }); 
    } 
    }; 
}); 

और फिर मोडल के अंतर्गत HTML में से इस नव परिभाषित निर्देश का उपयोग करें:

<input class="form-control spinner" type="text" my-spinner ng-model="noOfItems"/> 

यह जिस तरह से आपको चिंता करने की आवश्यकता नहीं है जब मोडल की सामग्री को DOM और में जोड़ा जाता है, तो आपने स्पिनरों को परिभाषित करने का एक पुन: प्रयोज्य तरीका बनाने का पक्ष बना दिया है!

$ modal से संबंधित प्रश्न पर वापस आ रहा है - opened वादा तब हल हो जाता है जब सभी डेटा तैयार होते हैं और मोडल दिखने वाले होते हैं (एनीमेशन प्रारंभ आदि) प्रतीक्षा संकेतक या इसी तरह प्रदर्शित करने में सक्षम होते हैं। किसी भी तरह से यह जानने के लिए डिज़ाइन नहीं किया गया था कि जब डीओएल पेड़ में मोडल की सामग्री डाली जाती है तो AngularJS के साथ इस ज्ञान को वास्तव में अधिकांश समय की आवश्यकता नहीं होती है।