Question

我注意到在离子todo应用程序示例中，如果我取消模态并再次打开它，过时/旧的待办事项信息仍保留在模态上。清除/重置旧模态数据的最佳位置是什么，以便在我取消或提交模态表单字段后始终有新的空白字段？

我应该删除或清除任务对象吗？在关闭时手动重置字段并创建？为某种on hide事件添加处理程序？

这里是角度/离子的例子：

http://ionicframework.com/docs/guide/building.html

以及相关的代码片段

 // Called when the form is submitted
  $scope.createTask = function(task) {
    $scope.tasks.push({
      title: task.title
    });
    $scope.taskModal.hide();
    task.title = "";
  };

  // Open our new task modal
  $scope.newTask = function() {
    $scope.taskModal.show();
  };

  // Close the new task modal
  $scope.closeNewTask = function() {
    $scope.taskModal.hide();
  };

和模态

<div class="modal">

<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
  <h1 class="title">New Task</h1>
  <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
</ion-header-bar>

<!-- Modal content area -->
<ion-content>

  <form ng-submit="createTask(task)">
    <div class="list">
      <label class="item item-input">
        <input type="text" placeholder="What do you need to do?" ng-model="task.title">
      </label>
    </div>
    <div class="padding">
      <button type="submit" class="button button-block button-positive">Create Task</button>
    </div>
  </form>

</ion-content>

Answer 1

我遇到了同样的问题。我首先尝试通过在关闭我的模态窗口时清除模型对象来清除我的表单数据，就像你一样，但这只适用于我提交表单的时候。取消时，它不起作用！（即使您在隐藏弹出窗口之前明确清除对象，也无法正常工作）

我最终解决了这个问题：

$scope.newTask = function() {
   $scope.task = {};
   $scope.taskModal.show();
};

这样，每次加载窗口时，都会清除模型。所以诀窍不是在提交数据时这样做，而是在打开模态窗口时。这至少对我有用。

顺便说一句，我还需要一个针对同一个模态窗口的编辑功能，所以我这样做：

$scope.editTask = function(task) {
   $scope.task = task;
   $scope.taskModal.show();
};

Answer 2

接受的答案肯定是正确的，但还有另一种方法可以达到同样的目标。

// Execute action on hide modal
$scope.$on('modal.hidden', function() {
  // Execute action
  $scope.task = {};
});

如何清除离子角todo例子中的模态

2 个答案: