AngularJS$模式悬停在弹出窗口上

我想要一个鼠标悬停弹出窗口，只有当我在屏幕上的元素悬停时才会显示。我目前正在使用$modal作为情态动词，我想也许我可以使用它。我遇到的问题是，当我不再关注页面元素时，我不确定如何让模态消失。模态中不需要任何操作，我只希望它在元素上方出现，在离开元素时消失

这是我的建议：

下面是一个使用jQuery的示例：

var myApp=angular.module（'myApp'，['ui.bootstrap']）；
myApp.controller（'myCtrl'、['$modal'、'$scope'、'$log'，
函数（$modal、$scope、$log）{
$scope.option={
名称：“名称（悬停在上方以获取更多详细信息）”，
longDescription:'这是我的详细描述…这里有很多文字'
}
$scope.showOptionDetails=函数（选项）{
$log.info（$scope.option）；
$scope.optionModel=$model.open({
模板：“选项{{Option.longDescription}}”，
控制器：“modalCtrl”，
决心：{
选项：函数（）{
返回$scope.option；
}
}
});
}
$scope.closeOptionDetails=函数（）{
$scope.optionModel.close（）；
}
}
]);
myApp.controller（'modalCtrl'[
“$modalInstance”、“$scope”、“$log”、“option”、函数（$modalInstance、$scope、$log、option）{
$log.info（可选）；
$scope.option=选项；
}
]);

非常感谢老兄-这正是我想要的

问题是，ng mouseleave位于错误的位置，使用了错误的控制器。在模态控制器中，您需要专门创建一个函数来调用$modalInstance.close（）

我随意添加了一个“关闭”按钮（这样，如果有人愿意，可以故意关闭模型，但你可以删除它。mouseleave绝对有效！）

var myApp=angular.module（'myApp'，['ui.bootstrap']）；
myApp.controller（'myCtrl'、['$modal'、'$scope'、'$log'，
函数（$modal、$scope、$log）{
$scope.option={
名称：“名称（悬停在上方以获取更多详细信息）”，
longDescription:'这是我的详细描述…这里有很多文字'
}
$scope.showOptionDetails=函数（选项）{
$log.info（$scope.option）；
$scope.optionModel=$model.open({
模板：'Option{{Option.longDescription}}}Close'，
控制器：“modalCtrl”，
决心：{
选项：函数（）{
返回$scope.option；
}
}
});
}
$scope.closeOptionDetails=函数（）{
$scope.optionModel.close（）；
}
}
]);
myApp.controller（'modalCtrl'[
“$modalInstance”、“$scope”、“$log”、“option”、函数（$modalInstance、$scope、$log、option）{
$log.info（可选）；
$scope.option=选项；
$scope.close=函数（）{
$modalInstance.close（）；
}
}
]);

---

您可以在这里看到它的作用：

鼠标离开事件没有触发的原因是

ng mouseleave=“closeOptionDetails”

应该是

ng mouseleave=“closeOptionDetails（）”

。但是你仍然无法得到你想要的行为，因为模态一创建就消失了。府绸能满足你的需要吗？是的，我想府绸能满足我的需要。其中一些可能会变得复杂，虽然有多个字段的长文本和图像。我可以使用带有弹出框的模板吗？我已经放弃使用带有html模板的弹出框了。网上有太多的例子根本不起作用。我想我将不得不要求用户点击一个按钮，然后得到一个传统的模式。非常欢迎！这是很好的刷上鼠标的角度运动和范围。我想我最好看看angular 2将要修复什么，然后破坏。。。

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

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