एंगुलरजेएस और केंडो यूआई

Question

का उपयोग करके सरल मोडल संवाद सेवा मैं अंगुलर के लिए काफी नया हूं और एक बहुत ही सरल हां/नहीं संवाद प्रदर्शित करने के लिए एक पुन: प्रयोज्य सेवा बनाने या समान बनाने में कुछ मदद की ज़रूरत है।

मैं मॉडल संवाद प्रदर्शित करने के लिए केंडो यूआई की खिड़की घटक का उपयोग कर रहा है, लेकिन मैं अपने आप को काफी समान कोड/HTML हर जगह डुप्लिकेट मैं एक पुष्टिकरण संवाद की जरूरत है लगता है:

<div kendo-window="myDialogWindow" k-modal="true" k-visible="false" k-width="250"> 
    <div style="text-align: center; width:100%"> 
     <div style="margin:10px 0 15px 0">{{ dialog.message }}</div> 
     <button class="k-button k-primary" id="yesButton" ng-click="onYes()">Yes</button> 
     <button class="k-button" id="noButton" ng-click="onNo()">No</button> 
    </div> 
</div> 

फिर कुछ क्लिक करें घटना या इसी तरह से,

$scope.showDialog = function(title, message) { 
    $scope.dialog.message = message; 
    $scope.myDialogWindow.title(title); 
    $scope.myDialogWindow.center(); 
    $scope.myDialogWindow.open(); 
} 

मैं कोड दोहराव को कम करने और कुछ इस के लिए पुन: प्रयोज्य बनाना चाहेंगे: मैं खोलने के लिए और संवाद केंद्र के लिए एक विधि कहते हैं।

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

मैं एक समाधान की तलाश कर रहा हूं, लेकिन जो सामान मैंने पाया है, वह मेरी सामान्य आवश्यकताओं के लिए बहुत अधिक है (और मैं लगातार विषय के लिए केंडो यूआई का उपयोग करना चाहता हूं)।

जो मुझे मिला है, ऐसा लगता है कि ऐसा लगता है कि एक कोणीय सेवा सबसे अच्छा तरीका हो सकता है (डीओएम में संवाद इंजेक्ट करें), मुझे यह बताने के लिए कि क्या क्लिक किया गया था। इस सेवा का उपयोग करने के लिए बहुत आसान होना चाहिए - कुछ इस तरह: http://plnkr.co/edit/ywCc3ZqFAXl3JEAu9XHW?p=preview

संक्षेप में :

dialogService.display("Some title", "The message").then(
    function() { 
     // Yes clicked... 
    }, function() { 
     // No clicked... 
    }); 

यहाँ एक सरल plunker कि सिर्फ एक केन्डो संवाद बटन क्लिक होने खोलता है मैं कैसे बना सकते हैं एक सेवा जो हां/नहीं संवाद प्रदर्शित करेगी, मुझे यह बताने के लिए कि क्या क्लिक किया गया था? यदि संभव हो, तो समाधान का प्रदर्शन करने के लिए कृपया प्लंकर अपडेट करें।

बेशक मैं बेहतर दृष्टिकोण होने पर सुझावों के लिए खुला हूं।

Answer 1

मैं नीचे दिए गए समाधान के साथ आया, अगर यह किसी की मदद करता है।

dialogService.js:

(function() { 
    'use strict'; 

    var serviceId = 'dialogService'; 
    angular.module('app').factory(serviceId, ['$q', dialogService]); 

    function dialogService($q) { 
     var service = { 
      showDialog: showDialog 
     }; 

     return service; 

     function showDialog(title, message) { 
      var deferred = $q.defer(); 

      var html = 
       '<div id="myDialogWindow"> ' + 
       ' <div style="text-align: center; width:100%"> ' + 
       ' <div style="margin:10px 0 15px 0">' + message + '</div> ' + 
       ' <button class="k-button k-primary" id="yesButton">Yes</button> ' + 
       ' <button class="k-button" id="noButton"">No</button> ' + 
       ' </div> ' + 
       '</div> '; 

      $('body').append(html); 

      var windowDiv = $('#myDialogWindow'); 
      windowDiv.kendoWindow({ 
       width: "250px", 
       title: title, 
       modal: true, 
       visible: false 
       }); 

      var dialog = windowDiv.data("kendoWindow"); 

      $('#yesButton').click(function(e) { 
       dialog.close(); 
       $('#myDialogWindow').remove(); 
       deferred.resolve(); 
      }); 

      $('#noButton').click(function(e) { 
       dialog.close(); 
       $('#myDialogWindow').remove(); 
       deferred.reject(); 
      }); 

      dialog.center(); 
      dialog.open(); 

      return deferred.promise; 
     } 
    } 
})(); 

HTML: नियंत्रक में

<div ng-controller="myController"> 
    <button ng-click="showDialog('Delete Confirmation', 'Delete line?')">Click me!</button> 
</div> 

showDialog विधि:

$scope.showDialog = function(title, message) { 
    dialogService.showDialog(title, message).then(
    function() { 
     alert('Yes clicked'); 
    }, 
    function() { 
     alert('No clicked'); 
    }); 
} 

न्यू plunker: http://plnkr.co/edit/WY0x1n6PwIKqxK0sKr3u?p=preview