Açısal-UI popover'ları program aracılığıyla açma ve kapatma

Question

İçeriğini sunucudan alan pop-up'lar oluşturmam gerekiyor.

Yani şu yönergeyi yarattı:

.directive('myPopover', [myService, function ($myService) { 
     return { 
      restrict: 'E', 
      transclude: true, 
      template: '<a href="" ng-click="wordClicked()" class="highlight" popover-trigger="manual" popover="Adequately good for the circumstances" popover-title="good enough " popover-placement="bottom" ng-transclude></a>', 
      link: function (scope, element, attrs) { 
       scope.wordClicked = function() { 
        if (POPUP IS NOT SHOWING){ 
         var message = myService.getMessage({key: element.text()}, 
          function() { 
            console.info("NEED TO SHOW POPOVER WITH "+ message); 
           }); 
        } 
        else { 
         console.info("NEED TO CLOSE POPOVER"); 
        } 
       } 
      } 
     } 
    }]); 

Ve getMessage başarı yöntemi içinde ben popover göstermek yapmak gerekir. documentation Luthur here tarafından yapılmış bir yorum bulamadığım için herhangi bir gösterge vermez, bir popover-trigger="manual" seçeneği var gibi görünüyor. tetiklemek için bir yol bulamadık programlı

Güncelleme: Ben Mosho tavsiye takip etmeye çalıştım ama özel olay tetikleyici içeren bir popover oluştururken sorun yaşıyorum.

plnkr

Teşekkür bakın! Henüz yapmadıysanız görünüyorsa

Answer 1

Birincisi, burada araç ipuçları ve popovers için kaynaklar şunlardır:

tooltip.js

popover.js

Sen özel tetikleyiciler ekleyebilir.

.directive('popover', [ '$tooltip', function ($tooltip) { 
    return $tooltip('popover', 'popover', 'click'); 
}]); 

s $tooltip 'yeni tooltip yapmak için kullanılan in sağlayıcı $get yöntem olup,' burada tanımlandığı gibidir: Popovers $tooltip sağlayıcısını kullanmak

this.$get = [ '$window', '$compile', '$timeout', '$parse', '$document', '$position', '$interpolate', function ($window, $compile, $timeout, $parse, $document, $position, $interpolate) { 
    return function $tooltip (type, prefix, defaultTriggerShow) {...} 

$tooltip sağlayıcısı bu yöntemi vardır: (triggerMap kutudan $tooltip sağlayıcı 3 tetikler tanımlandığı olduğu.

/** 
    * This allows you to extend the set of trigger mappings available. E.g.: 
    * 
    * $tooltipProvider.setTriggers({'openTrigger': 'closeTrigger'}); 
    */ 
    this.setTriggers = function setTriggers (triggers) { 
    angular.extend(triggerMap, triggers); 
    }; 

Bu gibi bir yapılandırma bloğunda kullanabilirsiniz:

myApp.config(['$tooltipProvider', function ($tooltipProvider) { 
    $tooltipProvider.setTriggers({'openTrigger': 'closeTrigger'}) ; 
}]); 

Ardından, bu gibi yeni bir popover yönergesini oluşturabilirsiniz:

.directive('myPopover', ['$tooltip', function ($tooltip) { 
    return $tooltip('myPopover', 'myPopover', 'openTrigger'); 
}]); 

Ve popover tetikleme sonra element.triggerHandler('openTrigger') kadar basit olacağını (veya closeTrigger) Burada element popoverdir.

:

angular.module('app', [ 'ui.bootstrap' ]) 
    .directive('popPopup', function() { 
    return { 
     restrict: 'EA', 
     replace: true, 
     scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, 
     templateUrl: 'template/popover/popover.html' 
    }; 
    }) 

    .directive('pop', function pop ($tooltip, $timeout) { 
    var tooltip = $tooltip('pop', 'pop', 'event'); 
    var compile = angular.copy(tooltip.compile); 
    tooltip.compile = function (element, attrs) { 
     var first = true; 
     attrs.$observe('popShow', function (val) { 
     if (JSON.parse(!first || val || false)) { 
      $timeout(function() { 
      element.triggerHandler('event'); 
      }); 
     } 
     first = false; 
     }); 
     return compile(element, attrs); 
    }; 
    return tooltip; 
    }); 

Ben bu yönergeyi nasıl kullanılacağına dair bir örnekle bir Plunker oluşturuldu:

Answer 2

Ben bir boolean kabul eden bir nitelik "pop-şov" eklemek için popover direktifini uzatıldı