I'm using angular-ui-router lib, which is great, but i've a problem with sharing scope when state changes.
The main idea is, once you get the product data making HTTP GET request, render the form filled, but this doesn't work.
Which is the best way, or the common pattern to do this? There is an example below
// App
adminApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('products', {
url: '/products',
views: {
'main@': {
templateUrl: 'views/admin/new/products.html',
controller: 'productController'
}
}
})
.state('addProduct', {
url: '/products/add',
views: {
'main@': {
templateUrl: 'views/admin/new/productsForm.html',
controller: 'productController'
}
}
})
.state('editProduct', {
url: "/products/edit",
views: {
'main@': {
templateUrl: 'views/admin/new/productsForm.html',
controller: 'productController'
}
}
});
}]);
// Product Controller
$scope.editProduct = function (id) {
productService.getProduct(id, function (err, res) {
if (err) {
return false;
}
$scope.formData = res;
$state.go('editProduct', null, { reload: true });
});
}
<!-- views/admin/productsForm.html -->
<section id="productsForm">
<div class="container">
<form method="post" enctype="multipart/form-data" ng-submit="saveOrUpdateProduct()">
<input type="text" class="form-control" name="name" ng-model="formData.name" placeholder="Name">
<input type="text" class="form-control" name="category" ng-model="formData.category" placeholder="Category">
<input type="hidden" class="form-control" name="_id" ng-model="formData._id">
<button type="button" class="btn btn-warning btn-lg" ui-sref="products">Cancel</button>
<button type="submit" class="btn btn-warning btn-lg">{{ formData._id ? 'Update' : 'Save' }}</button>
</form>
</div>
</section>