AngularJS: UI-Router Redirect Sicht auf Erfolg & Refresh Scope mit neuen Inhalten

Question

Ich bin Migrieren von NG-View zu UI-View.

In meinem Controller, nach erfolgreicher Erstellung/Aktualisierung/Löschen, möchte ich zu einer Indexansicht mit den neu aktualisierten/erstellt/gelöschten Daten umleiten.

Ich mache dies derzeit mit $state.go.

Das Problem ist, dass wenn der $ -Zustand geändert wird, der Bereich nicht aktualisiert wird. Es scheint, als ob die ursprünglichen admin.supplier Scope-Daten nicht aktualisiert werden.

Ich habe versucht, die ui-view mit $state.reload() vor dem Festlegen des Bereichs in AdminSupplierIndexController zu aktualisieren.

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

dies tun macht die GET-Anforderung an api/v1/suppliers, aber es nicht wirklich um die aktualisierte Umfang zeigen, wenn ich entweder den Refresh-Button im Browser getroffen oder manuell in einen anderen Zustand navigieren, dann navigieren wieder zurück.

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

Lösung:

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

Dies geschieht, weil Sie übergeordneten Zustand bewegen, die bereits erstellt wird. Sie müssten dem UI-Router signalisieren, dass Sie ihn neu laden möchten.

Ich denke, Sie könnten nach der reload Option von $state.go() suchen. Siehe die docs.

Eine Art Problemumgehung könnte auch sein, den "Index" -Zustand in einen gleichgeordneten Bearbeitungszustand zu verschieben. admin.supplier.index oder so. Dann würde es zerstört werden, wenn Sie zu admin.supplier.edit wechseln und neu erstellt werden, wenn Sie zurückgehen und keine zusätzlichen Optionen benötigt werden.

Auch als eine Randnotiz denke ich, es wäre gute Praxis, $state.go anstelle von $location wann immer möglich zu verwenden.