CODEWITHSUNDEEP
javascriptjqueryionic-frameworkionic2
J.Doe
J.Doe

Reputation: 33

ionic modal opening the previous modal

Hello guys I am trying to open a modal. the thing is I have binded my modal with a template poreviously now I'm trying to bind the another modal with $ionicmodal but it opening the previous one. Can somebody tell me what is it that I'm doing wrong

First the modal is being binded in APPCtrl

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);
  };
})

Now I'm tring to bind the modal over here in show List user but it is showing the previous one

.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'];
  };
})

Please tell me what is it that I'm doing wrong

UPDATE

Now I'm trying to open a state and see some data bbut the problem is I'm not able to see the users rather then all the HTML is being rendered. Here is the code for my 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>

and I've changed the controller a little bit

.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')
  };
})

Upvotes: 2

Views: 1050

Answers (1)

erikvimz
erikvimz

Reputation: 5476

Fix your optionActionCtrl controller. Put $scope.modal.show() inside the callback.

.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
        });
    };
})

Upvotes: 2

Related Questions