Question

我制作一个弹出屏幕我在按钮屏幕上打开弹出屏幕。我想在屏幕外点击时隐藏弹出屏幕可以吗？

angular.module('ionic.example', ['ionic'])

  .controller('PopupCtrl', function($scope, $timeout, $q, $ionicPopup) {
      $scope.showPopup = function() {
        $scope.data = {}
        $scope.setDefault = function () {
         console.log('Default set', arguments);
          $scope.$onClose({ test: 'hello' });
        };
        $scope.btns = [
          {
            label: "Hi",
            value: "hi"
          },
          {
            label: "Hello",
            value: "hello"
          }
        ];

        $ionicPopup.show({
          template: '',
          title: 'Pick a default value',
          scope: $scope,
          buttons: [
            { 
              text: 'Awesome',

              onTap: function(e) { return 'awesome'; } 
            },
            { text: 'Cool', onTap: function(e) { return 'cool'; } },
            { text: 'Cooler', onTap: function(e) { return 'cooler'; } },
            { text: 'Stuff', onTap: function(e) { return 'stuff'; } }
          ]
          }).then(function(res) {
            console.log('Tapped!', res);
          }, function(err) {
            console.log('Err:', err);
          }, function(msg) {
            console.log('message:', msg);
          });


      };


  });

Answer 1

 angular.element( $window ).on( "click", function( event ) {
   if( angular.element( "#popdiv" ).has( event.srcElement || event.target ).length === 0 ) {
    // hide popup
}} );

Answer 2

我找到了一种名为“ionic-close-popup”的解决方案。

在你的项目中安装它，添加你的index.html，注入控制器，并注册弹出窗口：

https://libraries.io/bower/ionic-close-popup

Answer 3

您可以使用以下代码

创建指令

angular.module("testapp").directive('clickAnywhereButHere', ["$document", function ($document) {
        //click-any-where-but-here
        return {
            restrict: 'A',
            link: function (scope, elem, attr, ctrl) {
                var elemClickHandler = function (e) {
                    e.stopPropagation();
                };

                var docClickHandler = function () {
                    scope.$apply(attr.clickAnywhereButHere);
                };

                elem.on('click', elemClickHandler);
                $document.on('click', docClickHandler);

                // teardown the event handlers when the scope is destroyed.
                scope.$on('$destroy', function () {
                    elem.off('click', elemClickHandler);
                    $document.off('click', docClickHandler);
                });
            }
        };

然后在你的html元素

中

<div class="mypopup" click-anywhere-but-here="function(){ alert('click out popup event')}"></div>

如何在屏幕

3 个答案: