使用創建Hoverable酥料餅的角度-UI-引導

Question

我已經在我的模板文件中創建一個酥料餅下面的代碼：

<span class="icon-globe visibility" 
     id="visibilityFor{{post.metaData.assetId}}" 
     popover="{{post.visibilityListStr}}" 
     popover-placement="right" 
     popover-trigger="mouseenter" 
     popover-popup-delay="50" 
     visibility> 
</span> 

我對酥料餅的幾個可點擊的鏈接。但問題是我無法在創建的popover上懸停。我提到了鏈接http://jsfiddle.net/xZxkq/ 並試圖創建一個指令即viz。 '能見度'爲此目的。

下面是代碼：

myAppModule.directive("visibility", function ($timeout,$rootScope) { 
    return { 

    controller: function ($scope, $element) { 
     $scope.attachEvents = function (element) { 
      $('.popover').on('mouseenter', function() { 
       $rootScope.insidePopover = true; 
      }); 
      $('.popover').on('mouseleave', function() { 
       $rootScope.insidePopover = false; 
       $(element).popover('hide'); 
      }); 
     } 
    }, 
    link: function (scope, element, attrs) { 
     $rootScope.insidePopover = false; 

     element.bind('mouseenter', function (e) { 
      $timeout(function() { 
       if (!$rootScope.insidePopover) { 
        element.popover('show'); 
        attachEvents(element); 
       } 
      }, 200); 
     }); 

     element.bind('mouseout', function (e) { 
      $timeout(function() { 
       if (!$rootScope.insidePopover) { 
        element.popover('show'); 
        attachEvents(element); 
       } 
      }, 200); 
     }); 

    } 
    } 
}); 

但我得到一個異常的「element.popover」，因爲它是不確定的。請指出我做錯了什麼，以及如何顯示/隱藏指令中的角度ui彈出窗口。我正在使用角度ui bootstrap JS文件。

Answer 1

HTML

<span class="icon-globe" id="visibilityFor" popover="hello how are you" 
     popover-placement="right" popover-trigger="mouseenter" 
     popover-popup-delay="50" viz> 
</span> 

指令

myAppModule.directive('viz', function ($rootScope,$timeout){ 
    return{ 

     restrict:"A", 
     link: function (scope, element, attrs) { 
      $rootScope.insidePopover = false; 

      element.bind('mouseenter', function (e) { 
       $timeout(function() { 
        if (!$rootScope.insidePopover) { 
         element.popover('show'); 
        // attachEvents(element); 
        } 
       }, 200); 
      }); 

      element.bind('mouseout', function (e) { 
       $timeout(function() { 
        if (!$rootScope.insidePopover) { 
         element.popover('show'); 
        // attachEvents(element); 
        } 
       }, 200); 
      }); 

     } 
    } 
}); 

注： - 不要忘了，包括角帶後的jquery.js & angular.js

Answer 2

我不知道這是否與OP有關，但我有同樣的問題，幸運的是我設法解決它。

未定義的錯誤

第一件事，第一，你越來越可能是（至少在我的情況），因爲你正在使用的ui-bootstrap開發版本中未定義的錯誤。在我的情況下，我試圖綁定element.popover時出現此錯誤。添加縮小版本的庫後，錯誤消失。

盤旋當在它

要做到這一點我創建了一個自定義的指令，使得從ui-bootstrap庫使用popover的保持酥料餅的開放。

指令

app.directive('hoverPopover', function ($compile, $templateCache, $timeout, $rootScope) { 
var getTemplate = function (contentType) { 
    return $templateCache.get('popoverTemplate.html'); 
}; 
return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var content = getTemplate(); 
     $rootScope.insidePopover = false; 
     $(element).popover({ 
      content: content, 
      placement: 'top', 
      html: true 
     }); 
     $(element).bind('mouseenter', function (e) { 
      $timeout(function() { 
       if (!$rootScope.insidePopover) { 
        $(element).popover('show'); 
        scope.attachEvents(element); 
       } 
      }, 200); 
     }); 
     $(element).bind('mouseleave', function (e) { 
      $timeout(function() { 
       if (!$rootScope.insidePopover) 
        $(element).popover('hide'); 
      }, 400); 
     }); 
    }, 
    controller: function ($scope, $element) { 
     $scope.attachEvents = function (element) { 
      $('.popover').on('mouseenter', function() { 
       $rootScope.insidePopover = true; 
      }); 
      $('.popover').on('mouseleave', function() { 
       $rootScope.insidePopover = false; 
       $(element).popover('hide'); 
      }); 
     } 
    } 
}; 
}); 

該指令還接受了酥料餅的自定義模板，這樣你就不會只限於標題和一些文本。您可以創建自己的html模板並將其提供給控件。

使用

<a href="#" hover-popover>Click here</a> 

的希望這可以幫助別人，將來別人:)

編輯

按照要求，這裏是一個Fiddle link。它缺乏造型，但它應該展示它的工作方式。

Answer 3

我覺得Cosmin擁有可靠的彈出窗口，但它似乎使用Twitter Bootstrap彈出窗口方法。這個想法是讓這個可移植的popover只能用於AngularJS和AngularJS的Bootstrap包裝，它們是UI Bootstrap或AngularStrap。

所以，我已經把它僅使用AngularStrap實現：

myApp.directive('hoverablePopover', function ($rootScope, $timeout, $popover) { 
    return { 
     restrict: "A", 
     link: function (scope, element, attrs) { 

      element.bind('mouseenter', function (e) { 
       $timeout(function() { 
        if (!scope.insidePopover) { 

         scope.popover.show(); 
         scope.attachEventsToPopoverContent(); 
        } 
       }, 200); 
      }); 

      element.bind('mouseout', function (e) { 
       $timeout(function() { 
        if (!scope.insidePopover) { 

         scope.popover.hide(); 
        } 
       }, 400); 
      }); 

     }, 
     controller: function ($scope, $element, $attrs) { 

      //The $attrs will server as the options to the $popover. 
      //We also need to pass the scope so that scope expressions are supported in the popover attributes 
      //like title and content. 
      $attrs.scope = $scope; 
      var popover = $popover($element, $attrs); 
      $scope.popover = popover; 
      $scope.insidePopover = false; 

      $scope.attachEventsToPopoverContent = function() { 

       $($scope.popover.$element).on('mouseenter', function() { 

        $scope.insidePopover = true; 

       }); 
       $($scope.popover.$element).on('mouseleave', function() { 

        $scope.insidePopover = false; 
        $scope.popover.hide(); 

       }); 
      }; 
     } 
    }; 
}); 

當你有一個酥料餅的元素，你需要考慮到你有觸發酥料餅的元素，你也有元素與實際的彈出式內容。

這個想法是當您將鼠標懸停在具有實際彈出式內容的元素上時，彈出窗口保持打開狀態。在我的指令中，鏈接函數負責觸發popover的元素並附加mouseenter/mouseout事件處理程序。

控制器負責通過AngularStrap $ popover服務設置範圍和彈出窗口本身。控制器在作用域中添加AngularStrap服務返回的彈出對象，以便在鏈接函數中可用。它還添加了一個方法attachEventsToPopoverContent，它將mouseenter/mouseout事件附加到帶有彈出內容的元素。

這個指令的使用方法是這樣的：

<a title="Popover Title" data-placement="left" data-trigger="manual" data-content="{{someScopeObject}}" content-template="idOfTemplateInTemplateCache" hoverablePopover=""> 

Answer 4

了該功能角UI引導0.14.0添加並記錄here。禁用觸發器並使用popover-is-open屬性手動指定打開/關閉狀態。

Answer 5

我在0.13.X中獲得的是將元素設置爲<button>，然後設置popover-trigger =「focus」。然後設置按鈕的樣式，然後通過單擊按鈕來聚焦按鈕。你可以懸停在彈出窗口中，點擊一個鏈接，我需要做的就是。

Answer 6

那裏我花了1天，最後得到解決方案。

<button uib-popover="{{dynamicPopover.content}}" 
    popover-trigger="outsideClick" popover-is-open="popoverIsOpen" 
    ng-mouseenter="popoverIsOpen = !popoverIsOpen" 
    popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Dynamic Popover</button> 

請檢查 Plunkeer Link 僅選中動態酥料餅的按鈕代碼

感謝，

Answer 7

演示：

https://jsbin.com/fuwarekeza/1/edit?html,output

指令：

myAppModule.directive('popoverHoverable', ['$timeout', '$document', function ($timeout, $document) { 
    return { 
     restrict: 'A', 
     scope: { 
      popoverHoverable: '=', 
      popoverIsOpen: '=' 
     }, 
     link: function(scope, element, attrs) { 
      scope.insidePopover = false; 

      scope.$watch('insidePopover', function (insidePopover) { 
       togglePopover(insidePopover); 
      }) 

      scope.$watch('popoverIsOpen', function (popoverIsOpen) { 
       scope.insidePopover = popoverIsOpen; 
      }) 

      function togglePopover (isInsidePopover) { 
       $timeout.cancel(togglePopover.$timer); 
       togglePopover.$timer = $timeout(function() { 
        if (isInsidePopover) { 
         showPopover(); 
        } else { 
         hidePopover(); 
        } 
       }, 100) 
      } 

      function showPopover() { 
       if (scope.popoverIsOpen) { 
        return; 
       } 

       $(element[0]).click(); 
      } 

      function hidePopover() { 
       scope.popoverIsOpen = false; 
      } 

      $(document).bind('mouseover', function (e) { 
       var target = e.target; 
       if (inside(target)) { 
        scope.insidePopover = true; 
        scope.$digest(); 
       } 
      }) 

      $(document).bind('mouseout', function (e) { 
       var target = e.target; 
       if (inside(target)) { 
        scope.insidePopover = false; 
        scope.$digest(); 
       } 
      }) 

      scope.$on('$destroy', function() { 
       $(document).unbind('mouseenter'); 
       $(document).unbind('mouseout'); 
      }) 

      function inside (target) { 
       return insideTrigger(target) || insidePopover(target); 
      } 

      function insideTrigger (target) { 
       return element[0].contains(target); 
      } 

      function insidePopover (target) { 
       var isIn = false; 
       var popovers = $('.popover-inner'); 
       for (var i = 0, len = popovers.length; i < len; i++) { 
        if (popovers[i].contains(target)) { 
         isIn = true; 
         break; 
        } 
       } 
       return isIn; 
      } 
     } 
    } 
}]); 

HTML：

<span class="icon-globe visibility" 
     id="visibilityFor{{post.metaData.assetId}}" 
     popover="{{post.visibilityListStr}}" 
     popover-is-open="{{post.$open}}" 
     popover-trigger="click" 
     popover-hoverable="true" 
     visibility> 
</span> 

Answer 8

我已經在一個非常乾淨的方式解決了這個問題，並認爲分享：正在創建不如UIB-酥料餅的孩子 .popover 這樣的想法是包裹uib-popover與父母和控制顯示&隱藏在父母的懸停。 。popover和uib-popover是這個父項的子項 ，所以剛好設置popover-trigger = none，並且你有你想要的東西。

我創建了一個普拉克例如： https://plnkr.co/edit/6vzrrH1KUyQeLHDz1hWp?p=preview

<span ng-init="popoverOpened=false" ng-mouseover="popoverOpened=true" ng-mouseleave="popoverOpened=false"> 
    <button class="btn btn-default" uib-popover-html="htmlPopover" 
      popover-trigger="none" popover-placement="bottom-left" popover-is-open="popoverOpened" > 
     <span>hover me</span> 
    </button> 
</span> 

享受。

Answer 9

你必須把觸發器在單引號，因爲，原因：

<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" type="button" class="btn btn-default">Mouseenter</button> 

Answer 10

最簡單的方法使用UIB-酥料餅 看看下面的工作實例有一個鼠標事件！ 你不必有UIB-標籤集，我面臨的問題與UIB-標籤集等補充例子。

<uib-tabset> 
     <uib-tab> 
     <uib-tab-heading> 
      Tab 1 
     </uib-tab-heading> 
     <div> 

      <span ng-mouseover="popoverIsOpen = true" 
       ng-mouseleave="popoverIsOpen = false"> 
      <button uib-popover-template="'includeFile.html'" 
        popover-trigger="outsideClick" 
        popover-is-open="popoverIsOpen" 
        popover-placement="right" 
        type="button" class="btn btn-default"> 
       Dynamic Popover 
      </button> 
     </span> 

     </div> 
     <p> tab 1</p> 
     </uib-tab> 
     <uib-tab> 
     <uib-tab-heading> 
      Tab 2 
     </uib-tab-heading> 

     <p> tab 2</p> 
     </uib-tab> 
    </uib-tabset> 

模板：includeFile.html

<div> 
    <span>This is for tesitng</span> 
    <strong> <a href="www.google.com">www.google.com</a></strong> 

</div>