首页 \ 问答 \ 离子无法显示模态(Ionic unable to showing modal)

离子无法显示模态(Ionic unable to showing modal)

 我目前面临着在离子上显示模态的问题（1.7.14）。 我创建了一个简单的应用程序，其中一个页面包含一个列表和一个添加按钮。 在这个按钮上，我想显示一个模式，用于在我的任务列表中添加新元素。  
 这是我的示例代码  
 modal.html（在www / templates文件夹中创建的新文件）  
<ion-modal-view>
    <!-- Modal header bar -->
    <ion-header-bar class="bar-secondary">
      <h1 class="title">New Task</h1>
    </ion-header-bar>

    <!-- Modal content area -->
    <ion-content>
        <button class="button" ng-click="closeModal()">back</button>
      <form ng-submit="AddItem(data)">
        <div class="list">
          <label class="item item-input">
            <input type="text" placeholder="What do you need to do?" ng-model="data.newItem">
          </label>
        </div>
        <div class="padding">
          <button type="submit" class="button button-block button-positive">Add item</button>
        </div>
      </form>

    </ion-content>
</ion-modal-view>
 
 controller.js文件  
angular.module('starter.controllers', [])

.controller('ToDoListCtrl', function ($scope, $ionicModal) {

// array list which will contain the items added
$scope.toDoListItems = [{
task: 'First task',
status: 'not done'
}, {
task: 'Second task',
status: 'not done'
}];

//init the modal
$ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
}).then(function (modal) {
    $scope.modal = modal;
});

// function to open the modal
$scope.openModal = function () {
    $scope.modal.show();
};

// function to close the modal
$scope.closeModal = function () {
    $scope.modal.hide();
};

//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function () {
    $scope.modal.remove();
});

//function to add items to the existing list
$scope.AddItem = function (data) {
    $scope.toDoListItems.push({
        task: data.newItem,
        status: 'not done'
    });
    data.newItem = '';
    $scope.closeModal();
};

});
 
 的index.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">
<title></title>

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

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<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="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>

</head>
<!--<body ng-app="starter">-->
<body ng-app="starter">
  <ion-header-bar class="bar-positive">
    <h1 class="title">Todo list</h1>
    <div class="buttons">
      <button class="button icon ion-plus" ng-click="openModal()">   </button>
    </div>
  </ion-header-bar>
  <ion-content>
      <ion-list ng-controller="ToDoListCtrl">
        <ion-item ng-repeat="item in toDoListItems">
          {{item.task}}
        </ion-item>
    </ion-list>
  </ion-content>
 </body>
</html>
 
 app.js  
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.StatusBar) {
  StatusBar.styleDefault();
}
});
})
 
 我尝试在打开模态之前添加console.log（'test'），并且在控制台中没有显示日志命令... 

I'm currently facing a problem for showing a modal on ionic (1.7.14). I've created simple app with one page containing a list and an add button. On this button, i would like to show a modal for adding new elements in my tasks's list. 
Here's my sample code 
modal.html (new file created in www/templates folder)  
<ion-modal-view>
    <!-- Modal header bar -->
    <ion-header-bar class="bar-secondary">
      <h1 class="title">New Task</h1>
    </ion-header-bar>

    <!-- Modal content area -->
    <ion-content>
        <button class="button" ng-click="closeModal()">back</button>
      <form ng-submit="AddItem(data)">
        <div class="list">
          <label class="item item-input">
            <input type="text" placeholder="What do you need to do?" ng-model="data.newItem">
          </label>
        </div>
        <div class="padding">
          <button type="submit" class="button button-block button-positive">Add item</button>
        </div>
      </form>

    </ion-content>
</ion-modal-view>
 
controller.js file 
angular.module('starter.controllers', [])

.controller('ToDoListCtrl', function ($scope, $ionicModal) {

// array list which will contain the items added
$scope.toDoListItems = [{
task: 'First task',
status: 'not done'
}, {
task: 'Second task',
status: 'not done'
}];

//init the modal
$ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
}).then(function (modal) {
    $scope.modal = modal;
});

// function to open the modal
$scope.openModal = function () {
    $scope.modal.show();
};

// function to close the modal
$scope.closeModal = function () {
    $scope.modal.hide();
};

//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function () {
    $scope.modal.remove();
});

//function to add items to the existing list
$scope.AddItem = function (data) {
    $scope.toDoListItems.push({
        task: data.newItem,
        status: 'not done'
    });
    data.newItem = '';
    $scope.closeModal();
};

});
 
Index.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">
<title></title>

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

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<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="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>

</head>
<!--<body ng-app="starter">-->
<body ng-app="starter">
  <ion-header-bar class="bar-positive">
    <h1 class="title">Todo list</h1>
    <div class="buttons">
      <button class="button icon ion-plus" ng-click="openModal()">   </button>
    </div>
  </ion-header-bar>
  <ion-content>
      <ion-list ng-controller="ToDoListCtrl">
        <ion-item ng-repeat="item in toDoListItems">
          {{item.task}}
        </ion-item>
    </ion-list>
  </ion-content>
 </body>
</html>
 
app.js 
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.StatusBar) {
  StatusBar.styleDefault();
}
});
})
 
I tried to add console.log('test') before opening modal and, log command is not diplayed in the console...

原文：https://stackoverflow.com/questions/35841070

更新时间：2021-10-10 07:10

最满意答案

 您需要在SlidingMenu代码中进行更改。 使SlidingFragmentActivity扩展SherlockFragmentActivity 。 然后将ActionBarSherlock作为库项目添加到SlidingMenu。 现在你的项目只需要添加SlidingMenu作为库项目，因为它引用了ActionBarSherlock。  
 引用自https://github.com/jfeinstein10/SlidingMenu#setup-with-actionbarsherlock ：  
 
  使用ActionBarSherlock进行设置  
  
   如上设置。  
   签出ActionBarSherlock的干净副本并导入Eclipse工作区。  
   添加ActionBarSherlock作为SlidingMenu的依赖项  
   进入您计划使用的SlidingActivities，使它们延伸Sherlock___Activity而不是___Activity 。  
  

You need to make a change in the SlidingMenu code. Make SlidingFragmentActivity extend SherlockFragmentActivity. Then add ActionBarSherlock as library project to SlidingMenu. Now your project only has to add SlidingMenu as library project, because that references ActionBarSherlock. 
Quoted from https://github.com/jfeinstein10/SlidingMenu#setup-with-actionbarsherlock: 
 
 Setup with ActionBarSherlock 
  
  Setup as above. 
  Checkout a clean copy of ActionBarSherlock and import into your Eclipse workspace. 
  Add ActionBarSherlock as a dependency to SlidingMenu 
  Go into the SlidingActivities that you plan on using make them extend Sherlock___Activity instead of ___Activity.

离子无法显示模态(Ionic unable to showing modal)

最满意答案

使用ActionBarSherlock进行设置

Setup with ActionBarSherlock

相关问答

ActionBarSherlock + HoloEverywhere + SlidingMenu EditText问题(ActionBarSherlock + HoloEverywhere + SlidingMenu EditText issue)[2022-06-18]

实现ActionBarSherlock后，导航图标不再触发SlidingMenu(Navigation Icon no longer firing SlidingMenu after implementing ActionBarSherlock)[2023-12-11]

Android ActionBarSherlock和SlidingMenu，菜单片段错误(Android ActionBarSherlock and SlidingMenu, Menu Fragment error)[2019-08-12]

如何使用ActionBarSherlock，ViewPagerIndicator和SlidingMenu(How to use ActionBarSherlock, ViewPagerIndicator and SlidingMenu)[2024-02-20]

SlidingMenu：显示事件的seconday菜单(SlidingMenu : Showing seconday menu on an event)[2023-08-31]

如何在SlidingMenu中使用SherlockFragmentActivity？(How to use SherlockFragmentActivity with SlidingMenu?)[2024-01-24]

如何使用jfeinstein10 / SlidingMenu双方(How to use jfeinstein10/SlidingMenu both sides)[2023-01-18]

当主页按钮使用actionbarsherlock单击slidingmenu时切换（）(toggle() when home button click on slidingmenu with actionbarsherlock)[2023-01-11]

如何正确实现SlidingMenu.OnOpenedListener？(How to implement SlidingMenu.OnOpenedListener correctly?)[2023-07-20]

SlidingMenu与ViewPager和ActionBarSherlock选项卡(SlidingMenu with ViewPager and ActionBarSherlock Tabs)[2023-12-07]

相关文章

最新问答