How to return a value from a modal

Question

I am adding a simple todo list to my ionic vs1/angularjs project. I want to use the ionic modal to launch this list. Since I need to launch it from everywhere I looked for a way to do this. I found this article https://medium.com/@saniyusuf/create-an-isolate-modal-with-ionic-v1-b4cf73f05727 which had me create a factory that could be launched from any controller. Love it! Problem is, it's a todo list where users need to be able to add/delete. I want to save this information to firebase so I created a factory to hold all the firebase crud operations for the ToDo list. So I now have a factory that launches the modal and one that has the firebase crud operations. In the modal launcher I figured out how to include the crud operations so that the buttons would interact. Problem is how do I get the value of the input.

Modal Launcher

 angular.module('formulaWizard')
   .factory('IsolateModal', IsolateModal)
 IsolateModal.$inject = ['$rootScope', '$ionicModal', '__ToDo', 
 '$window'];

function IsolateModal($rootScope, $ionicModal, __ToDo, $window) {


var modalsIsolateScope = $rootScope.$new();
var currentUser = $rootScope.currentUser || JSON.parse($window.sessionStorage.getItem('payload')); 

var isolateModal = {
  open: open
};

function open() {
  $ionicModal.fromTemplateUrl(
    'app/to-do/toDo.html',
    {
      scope: modalsIsolateScope
    }
  )
    .then(function (modalInstance) {
      modalsIsolateScope.close = function () {
        closeAndRemove(modalInstance);
      },
      modalsIsolateScope.add = function(){
        addTodo(modalInstance);
      };
      return modalInstance.show();
  });

}

function closeAndRemove(modalInstance) {
  return modalInstance.hide()
    .then(function () {
      return modalInstance.remove();
    });
}
  function addTodo(modalInstance) {
    var i = modalInstance

      __ToDo.toDo($scope.input)
        .then(function(result) {
          $scope.input = {};
          // Reload our todos, not super cool
          getAllTodos();
        });
    }


   return isolateModal;

 }

My Data Factory

 angular.module('formulaWizard')
.factory('__ToDo', function(__Refs, $q) {
return {
  toDo: function(id, userObject, cb) {
    var toDo = __Refs.userNotes.child(id).push(userObject);
    __Refs.userNotes.child(id).child(newToDo.key()).update({ toDo_id: 
 newToDo.key() }).then(function(response) {
      cb(response);
    }, function(e) {
      console.error('error occured');
    });;
  },
  updateToDo: function(userId, toDoId, userObject, cb) {
    var x = 
  __Refs.userNotes.child(userId).child(toDoId).update(userObject)
  .then(function(response) {
      cb(response);
    }, function(e) {
      console.error('Error editing');
    });
  },
  deleteToDo: function(userId, toDoId, cb) {
    __Refs.userNotes.child(userId).child(toDoId).remove(function(error) {
      if (error) {
        console.error(error);
      } else {
        cb();
      }
    });
  },
  getuserNotes: function(id, cb) {
    __Refs.userNotes.child(id).on('value', function(response) {
      cb(response.val());
    });
  }

 }
});

Call From Controller

$scope.openModal = function () {
        IsolateModal.open();

    };

Html

<ion-modal-view>
<ion-header-bar class="bar-stable">
<h1 class="title">My List</h1>
<button class="button icon ion-close-round button-icon" 
   ng-click="close()"></button>
 </ion-header-bar>
  <ion-content>
   <div class="list card" style="width:100%; margin-left:0;">
   <div class="item item-body">
    <div class="item-input-inset">
      <label class="item-input-wrapper">
        <input id="newInput" type="text" placeholder="New Todo" 
         ng-model="input.name">
      </label>
      <button class="button button-balanced button-small" ng-click="add()">
        Add Todo
           </button>
        </div>
         <ion-list can-swipe="true">
           <ion-item ng-repeat="item in todos">
             {{item.name}}
             <ion-option-button class="button-assertive" ng-click="deleteTodo(item.id)">
               Delete
              </ion-option-button>
           </ion-item>
         </ion-list>
       </div>
      </div>
   </ion-content>
 </ion-modal-view>

How can I get the input value from the html page into the factory?

Thanks

Your code has several layers. You need to make sure that each layer returns a promise. Also using a callback in a promise-based API is an anti-pattern. See [Why are Callbacks from Promise `.then` Methods an Anti-Pattern](https://stackoverflow.com/questions/35660881/why-are-callbacks-from-promise-then-methods-an-anti-pattern). — georgeawg, Nov 21 '17 at 16:50

score 1 · Answer 1 · answered Nov 20 '17 at 22:20

1

how do I get the value of the input?

Return the promise:

function open() {
   ̲r̲e̲t̲u̲r̲n̲ $ionicModal.fromTemplateUrl(
    'app/to-do/toDo.html',
    {
      scope: modalsIsolateScope
    }
  )
    .then(function (modalInstance) {
      modalsIsolateScope.close = function () {
        closeAndRemove(modalInstance);
      },
      modalsIsolateScope.add = function(){
        addTodo(modalInstance);
      };
      return modalInstance.show();
  });

}

Then extract the returned value from the promise:

$scope.openModal = function () {
    var promise = IsolateModal.open();
    promise.then(function(value) {
        console.log(value);
    });
    return promise;
};

answered Nov 20 '17 at 22:20

georgeawg

48,608
13
72
95

My questions wasn't very clear. I need to return the value to the IsolateModal to be used in the addToDo function in the IsolateModal factor in order to save it to firebase. – Sheri Trager Nov 21 '17 at 16:40
Your code has several layers. You need to make sure that each layer returns a promise. Also using a callback in a promise-based API is an anti-pattern. See [Why are Callbacks from Promise `.then` Methods an Anti-Pattern](https://stackoverflow.com/questions/35660881/why-are-callbacks-from-promise-then-methods-an-anti-pattern). – georgeawg Nov 21 '17 at 16:49

How to return a value from a modal

1 Answers1