I am working on refactoring the current code that I have. My controller is beginning to become unmanageable. I am working off of ui bootstrap. I found a post similar to what I am doing How to close Angular UI Modal from anywhere
Here is the factory function where I am making the connection to my database. I am identifying it in the success of the modal controller
function updateDrink(id,payload){
// need a payload for put and for post
return $http.put('/api/drink/'+id,payload).
success(function(data){
console.log(data);
return data;
}).
error(function(data){
console.log('error');
});
}
Here is my original code. I put all of this inside of a controller Everything works fine. I have the modal working I am getting the data.
$scope.modalUpdate = function(size,selectedDrink) {
console.log(selectedDrink);
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'templates/editCaffeineDrink.html',
controller: function($scope,$modalInstance,drink,DrinkLibrary,Drink){
$scope.drink = drink;
$scope.ok = function(id){
DrinkLibrary.updateDrink(id,$scope.drink).
success(function(data){
console.log(data);
});
$modalInstance.close($scope.drink);
};
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
};
},
size: size,
resolve: {
// resolve the drink
drink: function () {
// return selected drink
return selectedDrink;
}
}
});
// end of mal instance/modal open
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
This is my click handler I am calling the modal update and am correctly updating my database with each click.
<a href="" ng-click="modalUpdate('lg',drink)">
<i style="font-size:18px;" class="fa fa-pencil-square-o"></i>
</a>
Here is my current factory. I am getting the modal to drop down and the correct data is shown. However, I am not updating my information.
app.factory('ModalService', ['$modal', '$modalStack',function($modal, $modalStack) {
return {
trigger:function(selectedDrink){
var modalInstance = $modal.open({
templateUrl: 'templates/editCaffeineDrink.html',
controller: function($scope,$modalInstance,drink,DrinkLibrary,Drink){
$scope.drink = drink;
$scope.ok = function(id){
DrinkLibrary.updateDrink(id,$scope.drink).
success(function(data){
console.log(data);
});
$modalInstance.close($scope.drink); };
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
};
},
size: 'lg',
resolve: {
// resolve the drink
drink: function () {
return selectedDrink;
}
}
});
// end of modal open
}
};
}]);
Inside of my controller I am calling the factory and trigger
$scope.update=ModalService.trigger;
Then on my click handler I am update on click and passing the object. Everything is showing up in the modal but the modal is not updating.
<a href="" ng-click="update(drink)">
<i style="font-size:22px;" class="fa fa-pencil-square-o"></i>
</a>
