AngularJS $ модальное всплывающее окно при наведении

#angularjs #angular-ui-bootstrap

Вопрос:

Я хотел бы, чтобы всплывающее окно при наведении курсора мыши отображалось только при наведении курсора мыши на элемент на экране. В настоящее время я использую $modal для модалов и подумал, может быть, я мог бы его использовать. Проблема, с которой я сталкиваюсь, заключается в том, что я не уверен, как заставить 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;
    }
]);

1. Причина, по которой событие выхода мыши не запускается, заключается в том, что ng-mouseleave="closeOptionDetails" должно быть ng-mouseleave="closeOptionDetails()" . Но вы все равно не получите желаемого поведения, поскольку модальное исчезает, как только оно создается. Будет ли всплывающее окно соответствовать вашим потребностям?

2. Да, я думаю, что всплывающее окно удовлетворит мои потребности. Некоторые из них могут быть сложными, хотя с несколькими полями длинного текста и изображения. Могу ли я использовать шаблон с всплывающим окном?

3. Я отказался от всплывающего окна с html-шаблоном. Слишком много примеров в Интернете, которые просто не работают. Думаю, мне придется потребовать от пользователей нажать кнопку и получить традиционный модальный.

Ответ №1:

Большое спасибо, чувак — это именно то, что я искал!

Проблема заключалась в том, что ng-mouseleave был в неправильном месте и с неправильным контроллером. В модальном контроллере вам нужно специально создать функцию для вызова $modalInstance.close() .

Я взял на себя смелость добавить кнопку закрытия (чтобы кто-то мог намеренно закрыть модель, если захочет, но вы можете ее удалить. Mouseleave определенно работает!)

 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