AngularJS बूटस्ट्रैप मोडल

Question

के लिए पुन: प्रयोज्य टेम्पलेट कैसे बनाएं, इसलिए मैं AngularJS बूटस्ट्रैप मोडल (http://angular-ui.github.io/bootstrap/) का उपयोग कर रहा हूं। जो ठीक काम कर रहा है लेकिन मैं सोच रहा था कि क्या मैं एक बुनियादी टेम्पलेट बना सकता हूं जो शीर्षक और सामग्री में ले सकता है।

फिर यह मेरे टेम्पलेट को इन जानकारी के साथ पॉप्युलेट करेगा। टेम्पलेट में एक करीबी बटन होगा, रद्द करें बटन, ओवरले इत्यादि। क्या इस कोणीयजेएस को करने का कोई आसान तरीका है?

यह उदाहरण से लिया गया है और यह मेरे पास है। मेरी सामग्री टेम्पलेट यूआरएल में है। मोडल टेम्पलेट में गुजरना अच्छा होगा, इसलिए मुझे अपने द्वारा बनाए गए प्रत्येक मॉडल के लिए शीर्षक और बंद बटन को पुन: प्रयास करना नहीं है।

var modalInstance = $modal.open({ 
    templateUrl: 'myModalContent.html', 
    controller: ModalInstanceCtrl, 
    size: size, 
    resolve: { 
    items: function() { 
     return $scope.items; 
    } 
    } 
}); 

Answer 1

मिले निर्देशों के साथ यह करने के लिए एक तरीका है। यह एक कस्टम निर्देश के साथ एक मॉडल खोलता है जिसमें एक टेम्पलेट है। फिर आपके मोडल में जो भी हो, वह आपके कस्टम टेम्पलेट में डाला जाएगा। यह अच्छा है क्योंकि यह सिर्फ एक संदेश से अधिक है। इसे फ़ॉर्म, अलर्ट या जो कुछ भी आप चाहते हैं उससे भरा जा सकता है।

app.directive('modalDialog', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     link: function(scope) { 
     scope.cancel = function() { 
      scope.$dismiss('cancel'); 
     }; 
     }, 
     template: 
     "<div>" + 
      "<div class='modal-header'>" + 
      "<h3 ng-bind='dialogTitle'></h3>" + 
      "<div ng-click='cancel()'>X</div>" + 
      "</div>" + 
      "<div class='modal-body' ng-transclude></div>" + 
     "</div>" 
    }; 
    }); 

मॉडल ('yourTemplate.html'):

<modal-dialog> 
    <div> Your body/message </div> 
</modal-dialog> 

जावास्क्रिप्ट:

यह मेरा निर्देश था

app.controller('YourController', ['$scope', '$modal', function($scope, $modal) { 
    $scope.openModal = function() { 
    $modal.open({ 
     templateUrl: 'yourTemplate.html', 
     controller: ModalController 
    }); 
    }; 
}]); 

var ModalController = function ($scope, $modalInstance) { 
    $scope.dialogTitle = 'Your title'; 
}; 

Answer 2

चेकआउट जॉन पापा के हॉट तौलिया कोणीय बूटस्ट्रैप "टेम्पलेट"। आप उसे वहाँ से ले सकते हैं:

https://github.com/johnpapa/HotTowel-Angular/blob/master/NuGet/HotTowel-NG/app/common/bootstrap/bootstrap.dialog.js