AngularJS $ modal hoverover popup

Question

我想要一個懸停彈出窗口，只有當我將鼠標懸停在屏幕上的一個元素上時纔會顯示。我目前正在使用$ modal模式，並認爲我可以使用它。我遇到的問題是，我不確定如何讓模式在我不再瀏覽頁面元素時消失。在模態中不需要任何動作，我只是希望它在出現在元素上時出現，當我離開元素時消失。

這裏是我的plunkr：http://plnkr.co/edit/3vWVRA0CM7vrMugImgmX?p=preview

這裏是我要找的使用jQuery的例子：http://www.sundoginteractive.com/sunblog/posts/jquery-hover-box

var myApp = angular.module('myApp', ['ui.bootstrap']); 

myApp.controller('myCtrl', ['$modal', '$scope', '$log', 
    function ($modal, $scope, $log) { 
     $scope.option = { 
     name: 'Name (hover over for more details)', 
     longDescription: 'This is my detailed description... lots of text here' 
     } 
     $scope.showOptionDetails = function(option) { 
      $log.info($scope.option); 
      $scope.optionModal = $modal.open({ 
       template: '<div class="modal-header"><h3 class="modal-title">Option</h3></div><div class="modal-body">{{option.longDescription}}</div><div class="modal-footer"></div>', 
       controller: 'modalCtrl', 
       resolve: { 
        option: function() { 
         return $scope.option; 
        } 
       } 
      }); 
     } 

     $scope.closeOptionDetails = function() { 
      $scope.optionModal.close(); 
     } 
     } 
    ]); 

    myApp.controller('modalCtrl', [ 
    '$modalInstance', '$scope', '$log', 'option', function ($modalInstance, $scope, $log, option) { 
     $log.info(option); 
     $scope.option = option; 
    } 
]); 

Answer 1

非常感謝傢伙 - 我一直在尋找這正是！

問題是，ng-mouseleave在錯誤的地方和錯誤的控制器。在模態控制器中，您需要專門創建一個函數來調用$ modalInstance.close（）。

我把增加一個關閉按鈕的自由（所以有人可以故意關閉模型，如果他們想要的，但你可以刪除該鼠標離開肯定能行！）

var myApp = angular.module('myApp', ['ui.bootstrap']); 

myApp.controller('myCtrl', ['$modal', '$scope', '$log', 
    function ($modal, $scope, $log) { 
     $scope.option = { 
     name: 'Name (hover over for more details)', 
     longDescription: 'This is my detailed description... lots of text here' 
     } 
     $scope.showOptionDetails = function(option) { 
      $log.info($scope.option); 
      $scope.optionModal = $modal.open({ 
       template: '<div class="modal-header" ng-mouseleave="close()"><h3 class="modal-title">Option</h3></div><div class="modal-body">{{option.longDescription}}</div><div class="modal-footer" ng-click="close()">Close</div>', 
       controller: 'modalCtrl', 
       resolve: { 
        option: function() { 
         return $scope.option; 
        } 
       } 
      }); 
     } 

     $scope.closeOptionDetails = function() { 
      $scope.optionModal.close(); 
     } 
     } 
    ]); 

    myApp.controller('modalCtrl', [ 
    '$modalInstance', '$scope', '$log', 'option', function ($modalInstance, $scope, $log, option) { 
     $log.info(option); 
     $scope.option = option; 
     $scope.close = function() { 
      $modalInstance.close(); 
     } 
    } 
]); 

你可以看到它在這裏工作：http://plnkr.co/edit/3KiZdZsxwy6GDLoy6DhV?p=preview