angularjs $ गुंजाइश ng- टेम्पलेट के लिए उपलब्ध नहीं है



angularjs-scope angular-ui-bootstrap (1)

डिफ़ॉल्ट रूप से UI बूटस्ट्रैप $modal $rootScope को इसका डिफ़ॉल्ट दायरा के रूप में उपयोग करता है। लेकिन आप मान रहे हैं कि यह स्वचालित रूप से उस नियंत्रक के दायरे को ले जाएगा जो संवाद खोला, जो ऐसा नहीं होता। लेकिन एक scope संपत्ति है जिसे आप गुंजाइश को यूआई मोडल में पास करने के लिए सेट कर सकते हैं ताकि वह उस दायरे का उपयोग करें और उपलब्ध दायरे से एक बच्चा गुंजाइश बना सकें और इसे मॉडल के लिए अंतर्निहित गुंजाइश के रूप में इस्तेमाल किया जाएगा। तो आपके मोडल आवरण के साथ अपनी सेटिंग्स में दायरा संपत्ति लेते हैं और इसे पास करते हैं।

डॉक्टर से

गुंजाइश - मोडल की सामग्री के लिए उपयोग करने के लिए एक गुंजाइश उदाहरण (वास्तव में $ मोडल सेवा एक प्रदान की गई गुंजाइश का एक बच्चा दायरा बनाने वाला है) डिफ़ॉल्ट रूट $ तक

उदाहरण परिवर्तन: -

  function openEditModal() {
     var modalOptions = {
        closeButtonText: 'Cancel',
        actionButtonText: 'Save role',
        headerText: 'Edit role',
        bodyText: '',
        scope:$scope //<-- Pass scope
    };

    Modal.showModal({ templateUrl: 'myModalContent.html', size: 'lg' }, modalOptions).then(function (result) {
        console.log("save!", result);
    });
  }

और आपकी सेवा में: -

  /*I just did this here based on my limited understanding of your code*/
  return $modal.open(angular.extend(tempModalDefaults, customModalOptions)).result;

आपके मॉडल टेम्प्लेट से आइटम को वापस भेज दीजिए, मुझे यकीन नहीं है कि आपका टेम्प्लेट सामान्य है, यदि ऐसा है तो फिर आप डेटा को वापस स्थानांतरित करने के लिए एक अलग दृष्टिकोण लेना चाह सकते हैं: -

  <button class="btn btn-primary" ng-click="modalOptions.ok(currentItem)">{{modalOptions.actionButtonText}}</button>

डेमो

मैं एक फॉर्म को संपादित करने के लिए मोडल का उपयोग करने की कोशिश कर रहा हूं, मोडल एनजी-टेम्प्लेट स्क्रिप्ट में है, लेकिन संपादन बटन पर क्लिक करते समय फ़ॉर्म डेटा प्रदर्शित नहीं होता है।
$ स्कोप टेम्प्लेट स्क्रिप्ट के लिए उपलब्ध नहीं है
मैंने यहां एक प्लंकर बनाया है

$scope.setCurrentItem = function (item) {
    $scope.currentItem = item;
};

$scope.edit = function (item) {            //editing item
    $scope.setCurrentItem(angular.copy(item));            
    //$scope.editItem = item;
    openEditModal();
};

<!--html-->
<script type="text/ng-template" id="myModalContent.html">     
<label for="name">Role: </label>                                
<input type="text" ng-model="currentItem.roleName" required />
</script>

मैं कैसे इसे ठीक कर सकता हूं?





angular-ui-bootstrap