Scoping troubles when using a form with ng-template

ionic-v1
1

I have designed a page with a button that uses an ng-template together with the ionicModal service,
I have my AppCtrl as the controller of my entire page (Applied to the tag), and a button in that body uses the ionicModal to show a modal.
very similar to the given formula here

In my modal “send” button I use ng-click to call a method in my controller.
What happens is as follows:

  1. before showing the modal, every value in my scope which is binded to the ui in my modal, is received ok and I can have the appropriate start point
  2. when “send” is clicked, the called method tries to create an object of the variables in the scope (which were binded to my modal’s components), and there, the values I see are those I had before the modal was opened, not those he changed.
    Its like its getting a copy of my scope, and not the scope itself.
    How can I either give my modal its own controller and read values from it, or have everyone the same scope?

this is how I instantiate the modal in my controller:

$ionicModal.fromTemplateUrl('new-watch-request.html', {
    scope: $scope,
    animation: 'slide-in-up'
}).then(function(modal) {
    $scope.newWatchModal = modal;
});
2

but where is your code that has the issue? There is really nothing going on here… usually it is best to provide a simple example in CodePen

3

Hi Aaron, Im sorry to say but I have no CodePen account.
I did however created a small example to demonstrate my issue, tough im not at home, but I took the given modal example in ionic website and modified it to demonstrate.
As you can see in the code below, in my modal window Im binding to an object an it shows in the modal, but when I hide it, since the scope of the modal is an isolated scope, all the changes are lost for the parent scope.
Im new to ionic & Angular, I watched all the videos in thinkster.io but obviously there are some holes need to be filled. Im not quite sure if that is the correct approach to this type of issue.
My intent is to show a modal where I fill in details that when I close it, I build a new object out of it. will it be simpler if I have another controller just for my modal?

Edit: I also thought of having an entire different controller for my modal, which is fine by me, to have its logic there, but I have trouble handling the show/hide of it, because the ‘X’ button in the modal will need to activate the ‘hide()’ which is located in my first controller.

Anyway, example below:

  <head>
    <link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" />
    <script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="ionicApp">
    <ion-header-bar class="bar-energized">
      <h1 class="title">Contact Info</h1>
    </ion-header-bar>
    <ion-content>
    <div class="card" ng-controller='MainCtrl' ng-click="openModal()">
      <div class="item item-divider">
        {{contact.name}}
      </div>
      <div class="item item-text-wrap">
        {{contact.info}}
      </div>
    </div>
    </ion-content>

  <script id="contact-modal.html" type="text/ng-template">
    <div class="modal">
      <ion-header-bar>
        <h1 class="title">Edit Contact</h1>
      </ion-header-bar>
      <ion-content>
        <div class="list">
          <label class="item item-input">
            <span class="input-label">Name</span>
            <input type="text" ng-model="name">
          </label>
          <label class="item item-input">
            <span class="input-label">Info</span>
            <input type="text" ng-model="info">
          </label>
        </div>

        <button class="button button-full button-energized" ng-click="closeModal()">Done</button>
      </ion-content>
    </div>
  </script>
  </body>

</html>

The .js file is as follows:

var app = angular.module('ionicApp', ['ionic'])

app.controller('MainCtrl', function($scope, $ionicModal) {
  $scope.contact = {
    name: 'Mittens Cat',
    info: 'Tap anywhere on the card to open the modal'
  }

  $ionicModal.fromTemplateUrl('contact-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal
  })

  $scope.openModal = function() {
    $scope.name = "name binded before openModal";
    $scope.modal.show()
  }

  $scope.closeModal = function() {
    var a = { 
      "name": $scope.name,
      "info": $scope.info
    };
    
    $scope.modal.hide();
    
    $scope.contact.name = a.name;
    $scope.contact.info = a.info;
    alert(JSON.stringify(a));
  };

  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
})