एंगुलर-यूआई पॉपओवर प्रोग्रामेटिक रूप से

Question

को खोलने और बंद करने के लिए मुझे पॉपओवर बनाने की आवश्यकता है जो सर्वर से इसकी सामग्री प्राप्त करता है।

तो मैं निम्नलिखित निर्देश बनाया:

.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"); 
        } 
       } 
      } 
     } 
    }]); 

और getMessage सफलता विधि के अंदर मैं पॉपओवर दिखाने के लिए बनाने की जरूरत है। documentation उस के लिए कोई संकेत नहीं देता है हालांकि मुझे टिप्पणी मिली है Luthur here ऐसा लगता है कि popover-trigger="manual" विकल्प है। यह गति प्रदान करने के लिए एक रास्ता नहीं मिल सका प्रोग्राम के रूप में

अद्यतन: मैं Mosho सलाह का पालन करने की कोशिश की, लेकिन मैं कस्टम ईवेंट ट्रिगर के साथ एक पॉपओवर बनाने मुसीबतों हो रहा है।

देख plnkr

धन्यवाद!

Answer 1

पहला, अगर आप पहले से ही नहीं है देखा है, यहाँ टूलटिप्स और R आर के लिए स्रोत हैं:

tooltip.js

popover.js

आप कस्टम ट्रिगर जोड़ सकते हैं।

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

कहाँ $tooltip के प्रदाता $get विधि, नई tooltip बनाने के लिए इस्तेमाल की, यहाँ परिभाषित किया गया है: R आर $tooltip प्रदाता का उपयोग

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

$tooltip प्रदाता इस विधि हैं: (triggerMap 3 ट्रिगर्स हैं जिन्हें बॉक्स के बाहर $tooltip प्रदाता में परिभाषित किया गया है।

/** 
    * 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); 
    }; 

आप एक config ब्लॉक में उपयोग कर सकते हैं, इस तरह:

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

उसके बाद, आप इस तरह एक नया पॉपओवर निर्देश बना सकते हैं:

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

और पॉपओवर ट्रिगर तो element.triggerHandler('openTrigger') के रूप में सरल किया जाएगा (या closeTrigger) जहां element पॉपओवर है।

:

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; 
    }); 

मैं कैसे इस निर्देश का उपयोग करने का एक उदाहरण के साथ एक Plunker बनाया:

Answer 2

मैं एक विशेषता "पॉप शो" जो एक बूलियन स्वीकार करता है जोड़ने के लिए पॉपओवर निर्देश बढ़ाया http://plnkr.co/edit/94ZHgQ?p=preview