Question

我目前面临着在离子上显示模态的问题（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（＆＃39; test＆＃39;），并且在控制台中没有显示日志命令...

Answer 1

问题是您将控制器连接到<ion-list>中的视图并且之前创建了按钮，因此它不起作用。您必须在创建按钮之前添加ng-controller="ToDoListCtrl"。

Answer 2

您已将控制器包含在列表项中，但您尝试在列表外的控制器中调用该函数。所以试试这个。

<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 ng-controller="ToDoListCtrl">
      <ion-list>
        <ion-item ng-repeat="item in toDoListItems">
          {{item.task}}
        </ion-item>
    </ion-list>
  </ion-content>
 </body>
</html>

离子无法显示模态

2 个答案: