手风琴/莫代尔不在顶部使用离子

获得了我需要使用离子实现的地图应用程序的屏幕它有一张地图和一张允许看到地图一部分的列表。试图模拟本机行为，当点击它时需要显示地图，向下移动列表。任何线索如何处理它？手风琴/莫代尔不在顶部使用离子

2015-09-04 Lt.

所以这是开箱即用一点点，但你没有张贴任何代码，所以我只是要临场发挥。您可以使用顶部具有closeModal点击事件的透明div的模式。像这样：也检查出playground

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> 
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> 
    </head> 
    <body ng-app="app"> 
    <ion-pane > 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">Awesome App</h1> 
     </ion-header-bar> 
     <ion-content class="has-header" ng-controller="main"> 
     <button class="button button-assertive" ng-click="openModal()">I'm a button</button> 
     </ion-content> 
    </ion-pane> 
    <script id="my-modal.html" type="text/ng-template"> 
    <div style="filter:alpha(opacity=50); opacity:0.5;height: 70px;" ng-click="closeModal()">........</div> 
    <ion-modal-view style="height: 90%; top: 10%;"> 

    <ion-header-bar> 
     <h1 class="title">My Modal title</h1> 
    </ion-header-bar> 
    <ion-content> 
     Hello! 
    </ion-content> 
    </ion-modal-view> 
</script> 
    </body> 

</html>

JS：

angular.module('app', ['ionic']).controller('main', function($ionicModal, $scope){ 
    $ionicModal.fromTemplateUrl('my-modal.html', { 
    scope: $scope, 
    animation: 'slide-in-up' 
    }).then(function(modal) { 
    $scope.modal = modal; 
    }); 
    $scope.openModal = function() { 
    $scope.modal.show(); 
    }; 
    $scope.closeModal = function() { 
    $scope.modal.hide(); 
    }; 
    //Cleanup the modal when we're done with it! 
    $scope.$on('$destroy', function() { 
    $scope.modal.remove(); 
    }); 
    // Execute action on hide modal 
    $scope.$on('modal.hidden', function() { 
    // Execute action 
    }); 
    // Execute action on remove modal 
    $scope.$on('modal.removed', function() { 
    // Execute action 
    }); 
});

来源

2015-09-04 14:00:56

是一个好主意，但我看到的缺点是： *我需要在模式中包裹导航 *在ipad上看起来有点奇怪，在iPhone上完美虽然 –

啊所以你想使用这种相同的行为的列表？我大概可以做到这一点。它可能就像使用ng-class在列表显示时使标题透明一样简单。但是，我认为模态是唯一显示其他事情的东西。对于我而言，您可能只能编辑模式，以便像手机一样占用整个屏幕。 –

手风琴/莫代尔不在顶部使用离子

回答

相关问题