नियंत्रक के साथ एक मॉडल बनाने के लिए कोणीय-पट्टा का उपयोग कैसे करें?

Question

मैं एक कोणीय-पट्टा मोडल/एक नियंत्रक के साथ एक तरफ का उपयोग करने का सही तरीका खोजने के लिए संघर्ष कर रहा हूं।

हां, कॉलिंग कोड $scope इंजेक्ट कर सकता है, जो इसे मोडल में उपलब्ध करा सकता है। लेकिन इसके साथ मुद्दे हैं।

myModal = $modal({ 
scope: $scope, 
template: 'template.html', 
show: false, 
backdrop: "static", 
keyboard: false, 
persist: true 

});

यह संभावित मोडल-केवल विधियों और गुणों के साथ कॉलिंग नियंत्रक को प्रदूषित करेगा।

मैं आमतौर पर "नियंत्रक एएस" का उपयोग करता हूं, और इसलिए पहले स्थान पर मोडल करने के लिए $scope भी नहीं है!

आप एक नया $scope बना सकते हैं और फिर उसमें विधियों को सम्मिलित कर सकते हैं, लेकिन फिर, इसे $scope के मूल नियंत्रक में इंजेक्शन की आवश्यकता होगी। बुरा बुरा बुरा।

यदि मैं मॉडल टेम्पलेट के अंदर ng-controller का उपयोग करता हूं, तो मेरा नियंत्रक हो सकता है। लेकिन वह मुझे एक और समस्या देता है: अब मैं मोडल नियंत्रक में डेटा इंजेक्ट नहीं कर सकता, और मोडल बंद होने पर और मोडल से डेटा लौटने पर मेरा कॉलिंग कोड पता नहीं चल सकता है (केवल एक कारखाना शामिल है अभिभावक और बाल नियंत्रक डेटा सिंक्रनाइज़)।

मैं वास्तव में यह सबसे अच्छा तरीका बनाने के लिए संघर्ष कर रहा हूं।

कोई विचार?

चीयर्स

अद्यतन

यह कैसे मैं अब के लिए यह करना है:

मेरे टेम्पलेट में मैं एक निर्देश मोडल खुल जाता है कि सुनिश्चित करें।
उदाहरण:

<my-modal 
     on-update="ctrl.OnDialogUpdate"> 
</my-modal> 

तो मूल रूप से निर्देश मेरी मोडल कॉल करता है और जब मोडल बंद कर देता है या एक परिणाम के साथ वापसी करना चाहता है, यह विधि निर्देश पैरामीटर में निर्दिष्ट कहता है।

(function() { 

'use strict'; 

angular.module('app').directive('myModal',myModal); 

function myModal(){ 

    return { 

     restrict: 'E', 

     // The modal callback specified in the directive tag 
     scope: { 
      onUpdate: '&?' 
     }, 

     replace: true, 

     // This is the template for the directive, not the modal 
     templateUrl: 'button.html', 

     controllerAs: 'ctrl', 

     bindToController: true, 

     compile: function (element, attrs) { 

      return function (scope, element, attrs) { 

      }; 
     }, 


     /*@ngInject*/ 
     controller: function($scope, $log, $aside){ 

      var self = this; 

      var myDialog = $aside({ 

       // Dialog template 
       template: 'my-modal.template.html', 
       show: false, 
       animation: 'am-fade-and-slide-right', 
       placement: 'right', 
       backdrop: true, 
       html: true, 
       container: '', 
       scope: $scope 
      }); 


      // Opens modal 
      self.ShowDialog = function(){ 
       myDialog.$promise.then(function() { 
        myDialog.show(); 
       }) 
      }; 


      // Expose Update() method to the dialog template 
      $scope.Update = function(){ 

       if(angular.isFunction(self.onUpdate)) { 

        self.onUpdate()(); 
       } 

      } 

     } 
    } 

} 

})(); 

Answer 1

बस 'नियंत्रक' विकल्प का उपयोग:

$scope.showModal = function() { 
    $modal({ 
    title: 'My Title', 
    content: 'My Content', 
    show: true, 
    controller: 'ModalCtrl' 
    }); 
}; 

Here's a plnkr

Answer 2

तुम भी इस्तेमाल करने की कोशिश कर सकते हैं:

var modal= $modal({ 
      templateUrl: '.../../xxx.modal.html', 
      show: false, 
      backdrop: 'static', 
      controller: 'anyCtrl as vm' 
     }); 

यह निर्देश कैसा नज़र आ सकता है

इस मामले में आपके मोडल संवाद में "anyCtrl" नियंत्रक का दायरा होगा। टेम्पलेट में आप केवल vm.title या अन्य गुणों का उपयोग कर सकते हैं जिन्हें नियंत्रक में परिभाषित किया गया है।