AngularJS ui-router update parent controller model - angularjs

Question

So I have these states set up:
// Now set up the states
$stateProvider.state('collections', {
url: '/collections/:centerId',
templateUrl: '/assets/tpl/collections/index.html',
controller: 'CollectionsController',
controllerAs: 'controller',
resolve: {
// Resolve our collections before the state loads
collections: ['$stateParams', 'Api', function ($stateParams, api) {
// Get our center id
var centerId = $stateParams.centerId;
// Return our collections
return api.get('/api/collections', { centerId: centerId });
}]
},
data: {
requireLogin: true,
pageTitle: 'Collections'
}
}).state('collections.import', {
url: '/import',
templateUrl: '/assets/tpl/collections/import.html',
controller: 'ImportCollectionsController',
controllerAs: 'controller',
data: {
requireLogin: true,
pageTitle: 'Import your collections'
}
});
If you look at the 2 states, you can see that in the parent state I resolve all the current collections from our API. This is then assigned to the CollectionsController scope (this.collections).
In the ImportCollectionsController I can get access to that data via the $scope:
.controller('CollectionsController', ['$stateParams', 'collections', function ($stateParams, collections) {
// Assign this to a variable
var self = this;
// Get our collections
self.collections = collections;
/// --- removed for brevity --- ///
}])
.controller('ImportCollectionsController', ['$stateParams', '$scope', 'CollectionsService', 'toastr', function ($stateParams, $scope, collections, toastr) {
// Assign this to a variable
var self = this;
// Get our center id
self.centerId = $stateParams.centerId;
/// --- removed for brevity --- ///
// Save our data
self.save = function () {
// Import our results into our collections
self.import = collections.import(self.centerId, self.results);
// If the import is successful
self.import.promise.then(function (response) {
// Get our original collection array
var originals = $scope.$parent.controller.collections.data
// Update our original collection with the new imported items
originals.push(response.data);
// Set our results to nothing
self.results = null;
// Display a success message
toastr.success('Your collections have been imported successfully.');
});
};
}])
Just incase you need it, this is my API service:
.service('Api', ['$http', 'HttpHandler', function ($http, handler) {
// Private function to build our request
var buildRequest = function (url, method, data, params) {
var model = {
method: method,
url: url,
data: data,
params: params
};
return $http(model);
};
// GET
this.get = function (url, params) {
return handler.loadData(buildRequest(url, 'GET', null, params));
};
// POST
this.post = function (url, data) {
return handler.loadData(buildRequest(url, 'POST', data));
};
// PUT
this.put = function (url, data) {
return handler.loadData(buildRequest(url, 'PUT', data));
};
// DELETE
this.delete = function (url, data) {
return handler.loadData(buildRequest(url, 'DELETE', data));
};
}])
.service('HttpHandler', ['ErrorService', function (service) {
// Function to handle promises
this.loadData = function (promise) {
// Declare our model
var model = {
data: null,
loading: true,
promise: promise,
error: null
};
// If our promise succeeds
promise.then(function (response) {
// Store the data
model.data = response.data.result || response.data;
}, function (error) {
// Process our error
model.error = service.process(error);
});
// Finally
promise.finally(function () {
// Set our loading flag to false regardless if there is an error or not
model.loading = false;
});
// Return our model
return model;
};
}])
So in theory, when my save function is called in the ImportCollectionsController if the promise is successful I add the array to our existing array. What I expect is that if I navigate back to the collections state I should now see my new data, but I don't.
Can anyone tell me why?
Update
So I have changed my states to this (note the resolves)
.config(['$stateProvider', function ($stateProvider) {
// Now set up the states
$stateProvider.state('collections', {
url: '/collections/:centerId',
templateUrl: '/assets/tpl/collections/index.html',
controller: 'CollectionsController',
controllerAs: 'controller',
resolve: {
// Resolve our collections before the state loads
collections: ['$stateParams', 'Api', function ($stateParams, api) {
// Get our center id
var centerId = $stateParams.centerId;
// Return our collections
return api.get('/api/collections', { centerId: centerId });
}]
},
data: {
requireLogin: true,
pageTitle: 'Collections'
}
}).state('collections.import', {
url: '/import',
templateUrl: '/assets/tpl/collections/import.html',
controller: 'ImportCollectionsController',
controllerAs: 'controller',
resolve: {
originals : ['collections', function (collections) {
return collections.data;
}]
},
data: {
requireLogin: true,
pageTitle: 'Import your collections'
}
}).state('collections.create', {
url: '/create',
templateUrl: '/assets/tpl/collections/save.html',
controller: 'SaveCollectionController',
controllerAs: 'controller',
data: {
requireLogin: true,
pageTitle: 'Save your collection'
}
});
}])
and in my ImportCollectionsController I have changed the save function to this:
.controller('CollectionsController', ['$stateParams', 'collections', function ($stateParams, collections) {
// Assign this to a variable
var self = this;
// Get our collections
self.collections = collections;
console.log(self.collections);
}])
.controller('ImportCollectionsController', ['$stateParams', 'originals', 'CollectionsService', 'toastr', function ($stateParams, originals, collections, toastr) {
// Assign this to a variable
var self = this;
// Get our center id
self.centerId = $stateParams.centerId;
// Save our data
self.save = function () {
// Import our results into our collections
self.import = collections.import(self.centerId, self.results);
// If the import is successful
self.import.promise.then(function (response) {
// Update our original collection with the new imported items
originals.push(response.data);
// Set our results to nothing
self.results = null;
// Display a success message
toastr.success('Your collections have been imported successfully.');
});
};
// Cancel our import
self.cancel = function () {
// Set our results to nothing
self.results = null;
}
}])
and I am still getting the same issue. When I navigate back to collections they are not listed.

Answer 1

ok, to fix this I changed my states to this:
.config(['$stateProvider', function ($stateProvider) {
// Now set up the states
$stateProvider.state('collections', {
url: '/collections/:centerId',
templateUrl: '/assets/tpl/collections/index.html',
controller: 'CollectionsController',
controllerAs: 'controller',
resolve: {
// Resolve our collections before the state loads
collections: ['$stateParams', 'Api', function ($stateParams, api) {
// Get our center id
var centerId = $stateParams.centerId;
// Return our collections
return api.get('/api/collections', { centerId: centerId });
}]
},
data: {
requireLogin: true,
pageTitle: 'Collections'
}
}).state('collections.import', {
url: '/import',
templateUrl: '/assets/tpl/collections/import.html',
controller: 'ImportCollectionsController',
controllerAs: 'controller',
data: {
requireLogin: true,
pageTitle: 'Import your collections'
}
}).state('collections.create', {
url: '/create',
templateUrl: '/assets/tpl/collections/save.html',
controller: 'SaveCollectionController',
controllerAs: 'controller',
data: {
requireLogin: true,
pageTitle: 'Save your collection'
}
});
}])
There is no need to create a separate resolve on the child states because they inherit from the parent.
With that in mind, I can change my ImportCollectionsController to this:
.controller('ImportCollectionsController', ['$stateParams', 'collections', 'CollectionsService', 'toastr', function ($stateParams, originals, collections, toastr) {
// Assign this to a variable
var self = this;
// Get our center id
self.centerId = $stateParams.centerId;
// Save our data
self.save = function () {
// Import our results into our collections
self.import = collections.import(self.centerId, self.results);
// If the import is successful
self.import.promise.then(function (response) {
// Update our original collection with the new imported items
for (var i = 0; i < response.data.length; i++)
originals.data.push(response.data[i]);
// Set our results to nothing
self.results = null;
// Display a success message
toastr.success('Your collections have been imported successfully.');
});
};
// Cancel our import
self.cancel = function () {
// Set our results to nothing
self.results = null;
}
}])
and that has resolved the issue.