Question

我正在尝试使用从离线标题栏触发的模式覆盖在谷歌地图上。当我点击“登录”时，它会在黑屏中滑动。我听说包括bootstrap会导致问题，但是我没有使用bootstrap。

我的猜测是它与谷歌地图有关，但我不知道是什么。它也可能与ui-href有关。我很乐意听到建议。

我意识到直接导航到登录或注册会导致应用程序崩溃，因为地图未加载，但我怀疑这是一个问题，因为应用程序将始终首先加载到googlemap。

app.js：

angular.module('stuffmobile', ['ionic', 'ngCordova'])
.constant('ApiEndpoint', {
  url: 'http://localhost:3000/api'
})

.run(function($ionicPlatform, Map) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

    Map.init();
  });
})
.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
  .state('map', {
    url: '/',
    templateUrl: 'templates/map.html',
    controller: 'MapCtrl',
    controllerAs: 'mapctrl'
  })  
  .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html',
    controller: 'LoginCtrl',
    controllerAs: 'loginCtrl'
  })
  .state('signup', {
    url: '/signup',
    templateUrl: 'templates/signup.html',
    controller: 'SignUpCtrl',
    controllerAs: 'signUpCtrl'
  });


  $urlRouterProvider.otherwise("/");

});

index.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>


    <!-- compiled css output -->
    <link href="css/ionic.app.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src='lib/ngCordova/dist/ng-cordova.js'></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <!-- controllers -->
    <script src="js/controllers/map-controller.js"></script>
    <script src="js/controllers/login-controller.js"></script>
    <script src="js/controllers/signup-controller.js"></script>
    <!-- services -->
    <script src="js/services/markers-service.js"></script>
    <script src="js/services/map-service.js"></script>
    <script src="js/services/local-service.js"></script>
    <script src="js/services/user-service.js"></script>
  </head>
  <body ng-app="stuffmobile">
    <ion-pane>
      <ion-header-bar class="bar-energized">
        <h1 class="title">Stuffmapper</h1>
        <div class="buttons">
          <button class="button button-clear" ui-sref='login'>Login</button>
          <button class="button button-clear" ui-sref='signup'>Sign Up</button>
        </div>
      </ion-header-bar>
      <ion-nav-view></ion-nav-view>
    </ion-pane>
    <!-- Including google maps-->
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
  </body>
</html>

登录控制器

angular.module('stuffmobile')
.controller('LoginCtrl', function($scope, $ionicModal, $window, $timeout, UserService){
  var login = this;
  $ionicModal.fromTemplateUrl('templates/login.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
  });
});

的login.html

<script id="templates/login.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">Login</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-modal-view>
</script>

Answer 1

通常问题是＆＃34;冲突＆＃34;在css之间。

在我的项目中，问题是bootstrap的css。为了解决我使用getbootstrap定制的css，删除了css配置中的模态部分。

准确地说是bootstrap.css中的.modal类集display: hidden;

在您的代码中，我没有看到任何CSS包含。只有离子一次。但是离子js路径和css路径之间存在差异。

第一个是css/

<link href="css/ionic.app.css" rel="stylesheet">

第二个lib/ionic/js/：

<script src="lib/ionic/js/ionic.bundle.js"></script>

也许您需要将lib/ionic/添加到第一条路径：

<link href="lib/ionic/css/ionic.app.css" rel="stylesheet">

离子模态在黑色屏幕中滑动

1 个答案: