AngularJS bootstrap popover custom dyrektywa

Question

Utworzono dyrektywę przy użyciu niestandardowego popover bootstrap. To działa, pobierając dane wejściowe od użytkownika dla nazwy grupy i ma dwa przyciski do zastosowania tej wartości do modelu i pokazują tę wartość na etykiecie narzędziowej i przycisk do zamknięcia popover. Używam zdarzeń skryptu java popover, Problem polega na tym, że pojedynczy popover działa idealnie, ale kiedy otworzę inny, ten popover nie zamyka się. Potrzebujesz pomocy w zamykaniu innych witryn internetowych, gdy jedna jest otwarta. Oto plnk przedstawiający dyrektywę.

Oto kod

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' 
    } 
    ]; 

}]); 

Potrzebujesz pomocy zamykając inne popover podczas otwierania następnego.

Answer 1

Można zamknąć inne popovers gdy show.bs.popover jest wyzwalany, jak pokazano poniżej: 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 2

IMO, najbardziej modułowy sposób byłoby skorzystać z usługi, aby śledzić wszystkie otwierane wyskakujące okienka.

Daje to wiele korzyści.

1. można rozszerzyć usługę śledzić różne typy pop-upów, co pozwala zamknąć wszystkie lub otwierać wszystkie lub zrobić cokolwiek trzeba

2. Usuwa logikę od kontroli i dyrektyw na śledzenie popups. W ten sposób mogą skupić się na 1 konkretnej rzeczy. Możesz także uruchamiać wiele kontrolerów i okien podręcznych na stronie, dzięki czemu każdy kontroler/popup może być dyskretną jednostką pracy i nie musi martwić się o inne kontrolery/okienka wyskakujące na swoich przedmiotach.

Minusy robi to

1. Jak skomentował wcześniej można użyć angular bootstrap directives do tego. Uczynienie twojego kodu "czystszym", ponieważ wszystko to dzieje się dla ciebie. To, co nie zostało zrobione, zamyka wszystkie aktywne wyskakujące okienka. Możesz skorzystać z tej samej metody serwisowej, której użyłem i po prostu podłączyć ją do dyrektyw ng-bootstrap.
2. Wiązanie/rozłączanie zdarzeń JQUERY wydaje się przestać odpowiadać po kliknięciu ponad 8 razy. Nie mam odpowiedzi na pytanie, dlaczego tak jest, ale ogólny pomysł wykorzystania usługi do śledzenia jest nadal aktualny.

Będziesz w stanie wyciąć i wkleić ten kod do pnkr lub skrzynki dev i to zadziała.

// 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' 
    } 
    ]; 

}]);