I'm currently implementing a basic todo list feature in my ionic vs1/angularjs project and I want to integrate it with the Ionic modal for launching this list smoothly. Since I need this functionality accessible from any part of the application, I sought out a solution for achieving this goal. Discovering an insightful article at https://medium.com/@saniyusuf/create-an-isolate-modal-with-ionic-v1-b4cf73f05727, I followed the instructions to create a factory that could be initiated from various controllers - which turned out to be highly beneficial. However, there's a slight challenge regarding enabling users to add and delete tasks within the todo list. To address this, I decided to store this information on Firebase and constructed another factory responsible for all CRUD (Create, Read, Update, Delete) operations related to the ToDo list. Now equipped with a factory for launching the modal and one for handling Firebase interactions, I managed to incorporate the CRUD operations within the modal launcher. But an issue persists - how do I retrieve the value entered in the input field?
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 extract the input value from the HTML page into the factory?
Thank you