javascript - ionic 模态打开前一个模态

Question

大家好，我正在尝试打开一个模式。问题是我已经将我的模态与一个模板 poreviously 绑定(bind)在一起，现在我正在尝试将另一个模态与 $ionicmodal 绑定(bind)，但它打开了前一个模态。谁能告诉我我做错了什么

首先在 APPCtrl 中绑定(bind)模态

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {

  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  // Form data for the login modal
  $scope.action = {
    // name:'',
    // date: '',
    // type:''
  };

  $scope.placeholder="01/01/2016";

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/addAction.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeActionModal = function() {
    console.log('hello');
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.openAddActionModel = function() {
    $scope.modal.show();
    $('#action_datePicker').val(new Date());
  };

  // $scope.abc = function(){
  //   console.log('asdavshahs');
  //   alert('Hello');
  // }


  // Perform the login action when the user submits the login form
  $scope.saveData = function() {
    console.log('Doing login', $scope.action);

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeActionModal();
    }, 1000);
  };
})

现在我想在显示列表用户中将模式绑定(bind)到这里，但它显示的是前一个

.controller('optionActionCtrl' , function($scope, $timeout , $http , $ionicModal){



  $scope.closeActionModal = function() {
    console.log('hello');
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.openAddActionModel = function() {
    $scope.modal.show();
    // $('#action_datePicker').val(new Date());
  };

  $scope.showListOfUser = function(){
    //call made to the server
    //bind the modal to get it open
     $ionicModal.fromTemplateUrl('templates/showUsers.html', {
      scope: $scope
    }).then(function(modal) {
      debugger;
      $scope.modal = modal;
    });
    $scope.modal.show();
    // add all the users 
    $scope.users = ['a' , 'b' , 'c' , 'd'];
  };
})

请告诉我我做错了什么

更新

现在我正在尝试打开一个状态并查看一些数据，但问题是我无法看到用户，而是正在呈现所有 HTML。这是我的 View 的代码:

<ion-view view-title="ShowUserList">
  <ion-content>
    <!-- <ion-checkbox ng-model='checkStatus1' ng-click="showAlert(checkStatus1)">
        <h2 class="ng-binding">{{tittle}}</h2>
        <span class="distance ng-binding"></span>
        <h3 class="ng-binding">Created : {{created}}</h3>
        <h3 class="ng-binding">Target : {{targetD}}</h3>
    </ion-checkbox>  -->

    <ion-list>
      <ion-item  collection-repeat="user in users">
        Hello, {{user}}!
      </ion-item>
    </ion-list>


  </ion-content>

我稍微改变了 Controller

.controller('optionActionCtrl' , function($scope, $timeout , $http , $ionicModal , $state){
    // Triggered in the login modal to close it

    $scope.users = [];

  $scope.closeActionModal = function() {
    console.log('hello');
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.openAddActionModel = function() {
    $scope.modal.show();
    // $('#action_datePicker').val(new Date());
  };

  $scope.showListOfUser = function(){
    debugger;
    // add all the users 
    $scope.users = ['a' , 'b' , 'c' , 'd'];

    $state.go('app.UserListForAssigned')
  };
})

Answer 1

修复您的 optionActionCtrl Controller 。将 $scope.modal.show() 放入回调中。

.controller('optionActionCtrl' , function($scope, $timeout , $http , $ionicModal){
    $scope.closeActionModal = function() {
        console.log('hello');
        $scope.modal.hide();
    };

    $scope.openAddActionModel = function() {
        $scope.modal.show();
    };

    $scope.showListOfUser = function () {
        $ionicModal.fromTemplateUrl('templates/showUsers.html', {
            scope: $scope
        }).then(function(modal) {
            $scope.modal = modal;
            $scope.modal.show(); // Moved inside the callback
            $scope.users = ['a' , 'b' , 'c' , 'd']; // I assume this is relevant to your modal
        });
    };
})