AngularJS बूटस्ट्रैप पॉपओवर कस्टम निर्देश

Question

मैंने बूटस्ट्रैप कस्टम पॉपओवर का उपयोग करके निर्देश बनाया है। यह किसी समूह के समूह के लिए उपयोगकर्ता से इनपुट लेता है और इसमें मॉडल के लिए लागू होने के लिए दो बटन होते हैं और टूलटिप पर उस मूल्य को दिखाते हैं और पॉपओवर को बंद करने के लिए बटन दिखाते हैं। मैं पॉपओवर जावा स्क्रिप्ट ईवेंट का उपयोग कर रहा हूं, समस्या यह है कि एकल पॉपओवर पूरी तरह से काम करता है लेकिन जब मैं एक और खोलता हूं तो यह पॉपओवर स्वयं बंद नहीं होता है। एक खुला होने पर अन्य popovers बंद करने में मदद की ज़रूरत है। यहां निर्देश दिखाते हुए plnk है।

यहाँ कोड

var app = angular.module('myApp',[]); 
app.directive('customEditPopover', function() { 
     return { 
      restrict: 'A', 
      template: '<span><i class="fa fa-tags" aria-hidden="true"></i></span>', 
      scope: { 
       'myModel': '=', 
      }, 
      link: function (scope, el, attrs) { 
       scope.label = attrs.popoverLabel; 
       var btnsave = '#' + attrs.popoverSave; 
       var btncancel = '#' + attrs.popoverCancel; 
       var index = attrs.index; 
       $(el).tooltip({ 
        title: '' + (scope.myModel == undefined) ? "" : scope.myModel, 
        container: 'body', 
        placement: 'top' 
       }); 
       $(el).popover({ 
        trigger: 'click', 
        html: true, 
        content: attrs.popoverHtml, 
        placement: attrs.popoverPlacement, 
        container: 'body' 
       }) 
       .on('inserted.bs.popover', function (e) { 
        bindevents(); 
        $('#popovertext' + index).val(scope.myModel); 
       }).on('hidden.bs.popover', function() { 
        Unbindevents(); 
       }); 
       function bindevents() { 
        $(btnsave).bind('click', function() { 
         var text = $('#popovertext' + index).val(); 
         scope.myModel = text; 
         $(el).tooltip('hide') 
         .attr('data-original-title', text) 
         .tooltip('fixTitle') 
         toggle(); 
        }); 
        $(btncancel).bind('click', function() { 
         toggle(); 
        }); 
       } 
       function Unbindevents() { 
        $(btnsave).unbind('click'); 
        $(btncancel).unbind('click'); 
       } 
       function toggle() { 
        $(el).popover('hide'); 
        $(el).click(); 
       } 

      } 
     }; 
    }); 
app.controller('MyController',['$scope',function($scope){ 
    $scope.list=[ 
    { 
     name:'ABC' 
    }, 
    { 
     name:'DEF' 
    }, 
    { 
     name:'GHI' 
    }, 
    { 
     name:'KLM' 
    } 
    ]; 

}]); 

अन्य पॉपओवर बंद करने, जबकि अगले एक खोलने की आवश्यकता है है। IMO Updated Plunkr

$(el).popover({ 
       trigger: 'click', 
       html: true, 
       content: attrs.popoverHtml, 
       placement: attrs.popoverPlacement, 
       container: 'body' 
      }) 
      .on('show.bs.popover', function() { 
       var siblings = $(el).parent().parent().siblings(); 
       siblings.each(function (each){ 
       $(siblings[each]).find('span').popover('hide'); 
       }); 
      }); 

Answer 1

आप के रूप में नीचे दिखाया गया है जब show.bs.popover शुरू हो रहा है अन्य R आर बंद कर सकते हैं।

इससे कई लाभ मिलते हैं।

1. आप पॉपअप के विभिन्न प्रकार के ट्रैक करने के लिए, आप सभी को बंद या सभी को खोलने या जो भी आप की जरूरत है

2. यह का ट्रैक रखने पर नियंत्रण और निर्देशों से तर्क को हटा करने की अनुमति सेवा विस्तार कर सकते हैं पॉप अप। इस प्रकार वे 1 विशिष्ट चीज़ पर ध्यान केंद्रित कर सकते हैं। आप एक पेज पर एकाधिक नियंत्रक और पॉपअप भी चला सकते हैं जो प्रत्येक नियंत्रक/पॉपअप को काम की एक अलग इकाई होने की इजाजत देता है और अन्य वस्तुओं/पॉपअप को उनके आइटम पर स्टॉप करने की चिंता करने की आवश्यकता नहीं होती है।

इस

1. कर मैंने पहले आप इस के लिए उपयोग कर सकते हैं angular bootstrap directives टिप्पणी की के रूप में की विपक्ष। अपना कोड "क्लीनर" बनाना, क्योंकि यह सब आपके लिए किया जाता है। आपके लिए क्या नहीं किया जाता है सभी सक्रिय पॉपअप बंद कर रहा है। आप उसी सेवा दृष्टिकोण को ले सकते हैं जिसका मैंने उपयोग किया है और इसे ng-bootstrap निर्देशों में प्लग करें।
2. JQUERY बाध्यकारी/अनबाइंडिंग जब आप 8+ बार क्लिक करते हैं तो अनुत्तरदायी नहीं लगता है। मेरे पास इसका जवाब क्यों नहीं है, लेकिन ट्रैक रखने के लिए सेवा का उपयोग करने का समग्र विचार अभी भी वैध है।

आप shoudl plnkr या अपने देव बॉक्स में इस कोड को काट और पेस्ट करने में सक्षम होंगे और यह काम करेगा।

// Code goes here 
var app = angular.module('myApp',[]); 

app.factory('popUpService', function() { 
    var activePopups = []; 
    // factory function body that constructs shinyNewServiceInstance 

    return { 
    AddPopup : function(el) 
    { 
    activePopups.push(el); 
    }, 
    CloseAllPopups : function(closeFunction){ 
    for (var i = 0; i < activePopups.length; i++) 
    { 
      closeFunction(activePopups[i]) 

    } 
    } 
    } 

}); 
app.directive('customEditPopover',['popUpService', function (popUpService) { 
     return { 
      restrict: 'A', 
      template: '<span><i class="fa fa-tags" aria-hidden="true"></i></span>', 
      scope: { 
       'myModel': '=', 
      }, 
      link: function (scope, el, attrs) { 
       scope.label = attrs.popoverLabel; 
       var btnsave = '#' + attrs.popoverSave; 
       var btncancel = '#' + attrs.popoverCancel; 
       var index = attrs.index; 
       $(el).tooltip({ 
        title: '' + (scope.myModel == undefined) ? "" : scope.myModel, 
        container: 'body', 
        placement: 'top' 
       }); 
       $(el).popover({ 
        trigger: 'click', 
        html: true, 
        content: attrs.popoverHtml, 
        placement: attrs.popoverPlacement, 
        container: 'body' 
       }) 
       .on('inserted.bs.popover', function (e) { 
        bindevents(); 
        $('#popovertext' + index).val(scope.myModel); 
       }).on('hidden.bs.popover', function() { 
        Unbindevents(); 
       }); 
       function bindevents() { 

       CloseAll(); 

       popUpService.AddPopup($(el)); 

        $(btnsave).bind('click', function() { 
         var text = $('#popovertext' + index).val(); 
         scope.myModel = text; 
         $(el).tooltip('hide') 
         .attr('data-original-title', text) 
         .tooltip('fixTitle') 
        closeCurrent(); 
        }); 
        $(btncancel).bind('click', function() { 
        closeCurrent(); 
        }); 
       } 
       function Unbindevents() { 
        $(btnsave).unbind('click'); 
        $(btncancel).unbind('click'); 
       } 
       function closeCurrent(){ 
        $(el).popover('hide'); 
       // $(el).click(); 
       } 
       function CloseAll() { 

       popUpService.CloseAllPopups(function(popup){ 

        popup.popover('hide'); 
       // popup.click(); 
       }); 

      } 
     } 
     } 
    }]); 
app.controller('MyController',['$scope',function($scope){ 
    $scope.list=[ 
    { 
     name:'ABC' 
    }, 
    { 
     name:'DEF' 
    }, 
    { 
     name:'GHI' 
    }, 
    { 
     name:'KLM' 
    } 
    ]; 

}]); 

Answer 2

, सबसे मॉड्यूलर तरह से सभी खोला पॉपअप ट्रैक करने के लिए एक सेवा का उपयोग करने होगा: