AngularJS मोडल संवाद फ़ॉर्म ऑब्जेक्ट नियंत्रक

Question

में अपरिभाषित है हमारे पास एक ऐसा पृष्ठ है जो नीचे दिए गए फॉर्म के साथ एक मोडल संवाद खोलता है। हालांकि जब हम नियंत्रक को दबाते हैं जो फॉर्म एक्शन को संभालना चाहिए, तो फॉर्म ऑब्जेक्ट अपरिभाषित है और मैं समझने के लिए एक कोणीय नौसिखिया का बहुत अधिक हूं ...

यह मूल पृष्ठ नियंत्रक मोडल खोलने के लिए फ़ंक्शन रखता है संवाद:

app.controller('organisationStructureController', ['$scope', ..., '$modal', function ($scope, ..., $modal) { 

    $scope.openInvitationDialog = function (targetOrganisationId) { 
     $modal.open({ 
      templateUrl: 'send-invitation.html', 
      controller: 'sendInvitationController', 
      resolve: {$targetOrganisationId: function() { 
      return targetOrganisationId; 
      } 
      } 
     } 
    ); 
    }; 

एक पृष्ठ पर इस तरह

:

// inside a loop over organisations 
<a ng-click="openInvitationDialog({{organisation.id}})">Invite new member</a> 

निमंत्रण संवाद एचटीएमएल इस तरह दिखता है:

<div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <!-- ... --> 
      </div> 
      <div class="modal-body"> 
       <form name="invitationForm"> 

        <div class="form-group"> 
         <label for="email" style="color:white;">Email</label> 
         <input type="email" class="form-control" autocomplete="off" placeholder="New member email" id="email" name="email" ng-model="invitation.email" required="true"/> 
         <span class="error animated fadeIn" ng-show="invitationForm.email.$dirty && invitationForm.email.$error.required">Please enter an email address!</span> 
         <span class="error animated fadeIn" ng-show="invitationForm.email.$error.email">Invalid email</span> 
        </div> 

        <!-- ... --> 

        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button> 
         <button type="submit" class="btn btn-primary" ng-click="sendInvitation()">Invite</button> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 

नियंत्रक कि निमंत्रण संभाल चाहिए कहीं और है:

app.controller('sendInvitationController', ['$targetOrganisationId', '$scope', ..., 
    function ($targetOrganisationId, $scope, ...) { 

    $scope.invitation = { 
     // ... 
     targetOrganisation: { 
     id: $targetOrganisationId 
     } 
    }; 

    $scope.sendInvitation = function() { 

     // $scope.invitationForm is undefined 
     if ($scope.invitationForm.$invalid) { 
     return false; 
     } 

     // send the invitation... 

    }; 
    }]); 

तो नियंत्रक में प्रपत्र गुंजाइश प्राप्त करने के लिए सही तरीका क्या है?

शायद मुझे $modal को sendInvitationController में इंजेक्ट करने की आवश्यकता है और sendInvitation फ़ंक्शन जोड़ें? लेकिन जब मैं ऐसा करता हूं तो कार्रवाई कभी नियंत्रक में प्रवेश नहीं करती है। या क्या मुझे उस फ़ंक्शन को जोड़ना है जो नियंत्रक को संदर्भित करने के बजाय सबमिट कार्रवाई को $modal.open({ ... पर संभालता है? हालांकि मैं SendInvitationController को अपनी फ़ाइल और दायरे में रखना पसंद करूंगा।

किसी भी मदद के लिए धन्यवाद!

1. $scope.invitation वस्तु sendInvitationController में अपरिभाषित नहीं है, लेकिन सही डेटा रखती है:

   संपादित

   हम कई चीजें हैं जो हमें एक समाधान का निर्माण और कोई सवाल ही उत्तर देने में सहायता कर सकते हैं मदद की पाया , जबकि $scope.invitationForm अनिर्धारित बनी हुई है।

2. भेजने-invitation.html अंदर हम $scope.invitationForm.$invalid पहुँच सकते हैं और वहीं सत्यापन कर सकते हैं: <button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid">Invite</button>

तो सवाल यह है: क्यों करता है $scope करने के लिए invitationForm वस्तु के बंधन पर प्रपत्र जबकि प्रस्तुत विफल मॉडल संक्षेप में बांधता है?

Answer 1

मेरे पास एक ही समस्या थी और मॉड्यूल नियंत्रक के दायरे में फॉर्म ऑब्जेक्ट को परिभाषित करके इसे हल कर सकती थी। अपने कोड को काम करने के लिए, उदाहरण के लिए, $scope.form = {}; अपने नियंत्रक की शुरुआत में और अपना फॉर्म टैग <form name="form.invitation"> पर बदलें। बाद में $scope.form.invitation.$invalid भरा जाना चाहिए।

Answer 2

"क्यों?" के सवाल का जवाब "स्कोपिंग" है। tl; dr आपने मोडल संवाद के साथ एक नया दायरा बनाया है जो आपके नियंत्रक से दायरे के फॉर्म ऑब्जेक्ट को छुपाता है।

हमें आपके कोड को आसान बनाने में है, तो हम मोटे तौर पर निम्नलिखित मिलती है:

<div ng-ctrl="organizeCtrl"> 
    <modal-dialog> 
    <form name="invitationForm"> 
     <input type="email" ng-model="invitation.email" placeholder="Enter email..." /> 
     <input type="submit" ng-click="sendInvitation()" text="Invite!" /> 
     <input type="button" ng-click="cancel()" text="Cancel :(" /> 
    </form> 
    </modal-dialog> 
</div> 

(यह एक बहुत ही सरल संस्करण है जो चाहिए अभी भी मुख्य घटक के सभी है।) अब, देखते हैं कि स्कॉप्स कहां बनाए जाते हैं और उनमें इंजेक्शन क्या होता है।

<div ng-ctrl="sendInvitationController"> 
<!-- scope created above with "invitation" and "sendInvitation" from sendInvitationController --> 
    <modal-dialog> 
    <!-- scope created above for the modal dialog transclude --> 
    <form name="invitationForm"> 
    <!-- add "invitationForm" to the modal dialog's scope --> 
     <input type="email" ng-model="invitation.email" placeholder="Enter email..." /> 
     <input type="submit" ng-click="sendInvitation()" text="Invite!" /> 
     <input type="button" ng-click="cancel()" text="Cancel :(" /> 
    </form> 
    </modal-dialog> 
</div> 

यहाँ, आप देख सकते हैं एक नए बच्चे गुंजाइश <modal-dialog> तत्व और है कि जहां invitationForm वस्तु वास्तव में जोड़ दिया जाता है पर बनाया नहीं है। यही कारण है कि आप sendInvitationController में ऑब्जेक्ट नहीं देख सकते हैं लेकिन आप इसे ng-disabled के बटन पर देख सकते हैं। आप उपयोग करने में सक्षम होना चाहते हैं प्रपत्र (sendInvitationController में जैसे) <modal-dialog> तत्व के बाहर का निर्माण आप पारित करने के लिए है कि समारोह कॉल में की आवश्यकता होगी: एक पैरामीटर के रूप आमंत्रण पत्र को स्वीकार करने

<div ng-ctrl="organizeCtrl"> 
    <modal-dialog> 
    <form name="invitationForm"> 
     <input type="email" ng-model="invitation.email" placeholder="Enter email..." /> 
     <input type="submit" ng-click="sendInvitation(invitationForm)" text="Invite!" /> 
     <input type="button" ng-click="cancel()" text="Cancel :(" /> 
    </form> 
    </modal-dialog> 
</div> 

नियंत्रक के साथ sendInvitation कार्य करने के लिए:

app.controller('sendInvitationController', ['$targetOrganisationId', '$scope', ..., 
    function ($targetOrganisationId, $scope, ...) { 
    $scope.invitation = { 
    targetOrganisation: { 
     id: $targetOrganisationId 
    } 
    }; 
    $scope.sendInvitation = function (form) { 
    if (form.$invalid) { 
     return false; 
    } 
    // send the invitation... 
    }; 
}]); 

@Robin अन्य समाधान की पहचान की, विशेष रूप से एक वस्तु sendInvitationController के दायरे में निहित बनाने के लिए और फिर उस वस्तु को सीधे रूप देते हैं, को खोजने के लिए कोणीय की गुंजाइश ट्रेवर्सल तंत्र पर भरोसा form ओ <modal-dialog> के बाहर दायरे पर फेंक दें और उस पर ऑब्जेक्ट संलग्न करें। ध्यान दें कि यदि आपने में $scope.form = {} निर्दिष्ट नहीं किया है, तो कोणीय form के लिए <modal-dialog> के दायरे पर एक नया ऑब्जेक्ट बनाया होगा और आप अभी भी sendInvitationController में इसे एक्सेस करने में सक्षम नहीं होंगे।

उम्मीद है कि यह आपको या अन्य लोगों को कोणीय स्कॉइंग के बारे में सीखने में मदद करता है।

Answer 3

अपडेट नवंबर 2014: कोणीय-ui-बूटस्ट्रैप 0.12.0 से शुरू करने के लिए ट्रांसकुलर स्कोप नियंत्रक के दायरे से विलय हो गया है। कुछ भी करने की ज़रूरत नहीं है।

0.12.0 पहले:

अपने माता पिता के नियंत्रक दायरे में सीधे invitationForm डाल करने के लिए आप transcluded गुंजाइश इस तरह से बायपास करने के लिए की जरूरत है:

<form name="$parent.invitationForm"> 

ऊपर automaticaly अपने माता पिता के नियंत्रक में प्रपत्र वस्तु पैदा करेगा । पूर्व-प्रारंभिक सामग्री, लंबे ऑब्जेक्ट पथ या ईवेंट द्वारा गुजरने की कोई आवश्यकता नहीं है। एक बार मोडल खोले जाने के बाद बस $scope.invitationForm के साथ इसका उपयोग करें।

$modal.open({ 
    templateUrl: 'send-invitation.html', 
    controller: 'sendInvitationController', 
    scope: $scope // <-- I added this 
} 

कोई प्रपत्र नाम, कोई $parent:

Answer 4

मैं मेरा इस तरह काम करने के लिए मिला है। मैं AngularUI बूटस्ट्रैप संस्करण 0.12.1 का उपयोग कर रहा हूँ।

मुझे this द्वारा इस समाधान पर भेज दिया गया था।

Answer 5

$mdDialog.show({ 
       locals: {alert:"display meassage"}, 
       controller: DialogController, 
       templateUrl: 'views/dialog.html', 
       parent: angular.element(document.body), 
       clickOutsideToClose:true, 
       backdrop: true, 
       keyboard: true, 
       backdropClick: true, 

      })