AngularJS: ui-router Redirect vue sur la réussite & actualisation de la portée avec le nouveau contenu
Je suis de la migration de ng-vue ui-view.
Dans mon contrôleur, après avoir réussi à créer /mettre à jour /supprimer, je voudrais rediriger vers l'index de la vue avec la nouvelle mise à jour /création /suppression des données.
Je fais cela à l'aide de $state.go
.
app.controller('AdminSupplierCreateController', ['$scope', '$state', 'Supplier',
function ($scope, $state, Supplier) {
$scope.h1 = "Register a new Supplier";
$scope.store = function()
{
Supplier.post($scope.supplier)
.then(
function() {
console.log("Successfully Created Supplier");
$state.go('admin.supplier');
},
function(response) {
console.log("Error with status code: " + response.status);
}
);
};
}]);
Le problème est que lorsque l' $état est changé, le champ n'est pas mis à jour. Il semble que l'origine admin.supplier
portée de données n'est pas en cours d'actualisation.
J'ai essayé de l'actualisation de la ui-view
avec $state.reload()
avant de définir le champ d'application de AdminSupplierIndexController
.
app.controller('AdminSupplierIndexController', ['$scope', '$state', 'suppliers',
function ($scope, $state, suppliers) {
$state.reload();
$scope.suppliers = suppliers;
}]);
Faire cela permet de la requête get api/v1/suppliers
, cependant il n'a pas fait de montrer les mises à jour de la portée, à moins que je soit frappé le bouton actualiser du navigateur manuellement ou naviguez jusqu'à un état différent de l'état, puis retourner à nouveau.
$stateProvider
...
.state('admin.supplier', {
url : "/supplier",
templateUrl : 'templates/admin/supplier/index.html',
controller: "AdminSupplierIndexController",
resolve: {
suppliers: ['Supplier', function(Supplier) {
return Supplier.getList();
}]
}
})
.state('admin.supplier.create', {
url : "/create",
templateUrl : 'templates/admin/supplier/create.html',
controller: "AdminSupplierCreateController"
})
Solution:
app.controller('AdminSupplierCreateController', ['$scope', '$state', 'Supplier',
function ($scope, $state, Supplier) {
$scope.h1 = "Register a new Supplier";
$scope.store = function() {
Supplier.post($scope.supplier)
.then(
function() {
console.log("Successfully Created Supplier");
//Force Reload on changing state
$state.go('admin.supplier', {}, {reload: true});
},
function(response) {
console.log("Error with status code: ", response.status);
}
);
};
}]);
OriginalL'auteur Gravy | 2014-05-21
Vous devez vous connecter pour publier un commentaire.
Cela se produit parce que vous vous déplacez à l'état parent qui est déjà créé. Vous devez signal de l'interface utilisateur du routeur que vous ne souhaitez recharger.
Je pense que vous pourriez être à la recherche pour le
reload
option de$state.go()
. Reportez-vous à la docs.Aussi, une sorte de solution de contournement peut-être pour déplacer l ' "indice" de l'état à un frère ou une sœur de l'état de la modifier. admin.le fournisseur.index. Ensuite, il serait détruit pendant la transition à l'admin.le fournisseur.modifier et recréé lors de la transition de retour et pas d'options supplémentaires sont nécessaires.
Également comme une note de côté, je suppose que ce serait considéré comme une bonne pratique à utiliser
$state.go
au lieu de$location
chaque fois que possible.$state.go('admin.supplier', {}, {reload: true});
dans la réussite de rappel deSupplier.post
Cela m'a vraiment aidé et fonctionne exactement comme je m'y attendais.
OriginalL'auteur user2847643