I've been using angular for about a week now and I've been struggling to solve this issue. I have a service that wraps around $http because multiple controllers make calls to the same URL. On one particular page, there is a lot of server-side business logic happening on a post request, so I want to trigger a $route.reload(). It seems like it's working because after vm.saveItem() the controller is reinitialized, but the $http.get() call doesn't actually send the signal to fetch new data from the server. What am I missing?
myModule.factory("itemRepository", function ($http) {
var baseUrl = "/api/inventory";
return {
getLocations: function (itemName) {
return $http({
url: baseUrl + "/" + itemName + "/locators",
method: "GET",
cache: false
});
},
addNewLocator: function (itemName, newLocator) {
return $http.post(baseUrl + "/" + itemName + "/locators", newLocator);
}
};
});
// itemEditorController.js
(function () {
"use strict";
angular.module("app-inventoryitems")
.controller("itemEditorController", itemEditorController);
function itemEditorController($routeParams, $route, itemRepository) {
// initialize vars
var vm = this;
vm.itemName = $routeParams.itemName;
vm.errorMessage = "";
// Models
vm.items = [];
vm.isBusy = true;
vm.newLocator = {};
vm.newLocator.name = vm.itemName;
// PROBLEM HERE, does not call server after post new data
// and $route.reload() was called
itemRepository
.getLocations(vm.itemName)
.then(function (response) {
angular.copy(response.data, vm.items);
}, function (err) {
vm.errorMessage = "Failed to load batches.";
})
.finally(function () {
vm.isBusy = false;
});
vm.saveItem = function () {
vm.isBusy = true;
itemRepository.addNewLocator(vm.itemName, vm.newLocator)
.then(function (response) {
vm.newLocator = {};
$route.reload();
}, function (error) {
vm.errorMessage = "Failed to save new item.";
})
.finally(function () {
vm.isBusy = false;
})
}
}
})();