AngularJS: ui-router Reindirizzare la vista su successo e aggiornare l'ambito con i nuovi contenuti

Question

Sto migrando da ng-view a ui-view.

Nel mio controller, dopo aver creato/aggiornare/eliminare correttamente, vorrei reindirizzare a una vista indice con i dati appena aggiornati/creati/cancellati.

Attualmente lo faccio utilizzando $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); 
        } 
       ); 
     }; 
}]); 

Il problema è che quando lo stato $ viene modificato, l'ambito non viene aggiornato. Sembra che i dati dello scope originale admin.supplier non vengano aggiornati.

Ho provato ad aggiornare ui-view con $state.reload() prima di impostare l'ambito in AdminSupplierIndexController.

app.controller('AdminSupplierIndexController', ['$scope', '$state', 'suppliers', 
    function ($scope, $state, suppliers) { 
     $state.reload(); 
     $scope.suppliers = suppliers; 
}]); 

In questo modo si rende la richiesta GET a api/v1/suppliers, ma in realtà non mostrano la portata aggiornato a meno che non sia colpito il pulsante di aggiornamento del browser o navigare manualmente ad uno stato diverso, quindi passare di nuovo.

$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" 
    }) 

Soluzione:

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); 
        } 
       ); 
     }; 
}]); 

Answer 1

Questo accade perché si sposta in stato di genitore che è già stato creato. Dovresti segnalare a ui-router che vuoi ricaricarlo.

Penso che si stia cercando l'opzione reload di $state.go(). Fare riferimento a docs.

Inoltre, una sorta di soluzione alternativa potrebbe essere quella di spostare lo stato "indice" in uno stato di modifica di pari livello. admin.supplier.index o così. Quindi verrà distrutto durante la transizione a admin.supplier.edit e ricreato al momento della transizione e non sono necessarie ulteriori opzioni.

Inoltre, come nota a margine, suppongo che sarebbe opportuno utilizzare $state.go anziché $location quando possibile.