मेरे पास एक तत्व है जिसकी पूरी सामग्री को स्थानांतरित किया जा सकता है। ट्रांसक्लूजन ऐच्छिक है, इसलिए मैं इसके अंदरूनी हिस्सों को रहने दे सकता हूं लेकिन एक आंतरिक तत्व को ट्रांसक्लूड किया जा सकता है। आइए इसे क्रिया में देखें:
<h4 class="modal-title" ng-transclude="title">
Are you sure you want to remove this <span ng-transclude="innerType">good</span>
</h4>
निर्देश परिभाषा में मेरे पास है:
myApp.directive('confirmDeleteModal',function(){
return {
restrict:'E',
transclude: {
title:'?modalTitle',
innerType:'?modalType',
},
templateUrl:'templates/confirm_delete_modal.html',
scope: {
obj:'=info',
},
}
});
एचटीएमएल कोड ऐसा होगा:
<confirm-delete-modal info="goodToBeDeleted">
<modal-type>good</modal-type>
</confirm-delete-modal>
जब मैं अपना कोड चलाता हूं, तो मुझे निम्न त्रुटि मिलती है: [ngTransclude:orphan].
मुझे क्या करना चाहिए? मैं AngularJS v1.5.8 . का उपयोग कर रहा हूं
1 उत्तर
आप मोडल-शीर्षक की फ़ॉल बैक सामग्री में एक अन्य निर्देश एनजी-ट्रांसक्लूड का उपयोग करते हैं। लेकिन एनजी-ट्रांसक्लूड स्पैन का "पैरेंट" बन जाता है और ट्रांसक्लूजन फंक्शन प्रदान नहीं करता है। मेरा सुझाव है कि आप अपने निर्देश को संशोधित करें और यह जानने के लिए isSlotFilled विधि का उपयोग करें कि शीर्षक भरा गया है या नहीं:
directive('confirmDeleteModal',function(){
return {
restrict:'E',
transclude: {
title:'?modalTitle',
innerType:'?modalType',
},
link: function(scope, elem, attrs, ctrl, trfn) {
scope.titleFilled = trfn.isSlotFilled('title');
},
template:'<h4 class="modal-title" ng-transclude="title" ng-if="titleFilled"></h4>' +
'<h4 class="modal-title" ng-if="!titleFilled">Are you sure you want to remove this <span ng-transclude="innerType">good</span></h4>',
scope:{
obj:'=info',
}
}
})
(https://plnkr.co/edit/k0RXLWbOvHdNc9WFpslz?p=preview)
संबंधित सवाल
नए सवाल
angularjs
AngularJS (1.x), ओपन-सोर्स जावास्क्रिप्ट फ्रेमवर्क के बारे में प्रश्नों के लिए उपयोग करें। कोणीय 2 या बाद के संस्करणों के लिए इस टैग का उपयोग न करें; इसके बजाय, [कोणीय] टैग का उपयोग करें।