AngularJS: ui-router Przekierowanie widoku na sukces i zakres odświeżania z nową zawartością

Question

Przeprowadzam migrację z ng-view do ui-view.

W moim kontrolerze, po pomyślnym utworzeniu/aktualizacji/usunięciu, chciałbym przekierować do widoku indeksu z nowo zaktualizowanymi/utworzonymi/usuniętymi danymi.

Obecnie robię to za pomocą $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); 
        } 
       ); 
     }; 
}]); 

Problem polega na tym, że po zmianie stanu $ zakres nie jest aktualizowany. Wygląda na to, że pierwotne dane zasięgu admin.supplier nie są odświeżane.

Próbowałem odświeżyć ui-view z $state.reload() przed ustawieniem zakresu w AdminSupplierIndexController.

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

Rozwiązanie to sprawia, że ​​żądania GET do api/v1/suppliers jednak faktycznie nie pokazują zaktualizowany zakres, chyba że albo nacisnąć przycisk odświeżania w przeglądarce lub ręcznie przejść do innego stanu, a następnie przejdź z powrotem.

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

Rozwiązanie:

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

Dzieje się tak dlatego, że przejście do stanu macierzystego, który jest już utworzony. Będziesz musiał zasygnalizować routerowi ui, że chcesz go ponownie załadować.

Myślę, że być może szukasz opcji reload z $state.go(). Patrz: docs.

Ponadto rozwiązaniem może być przeniesienie stanu "indeksu" do stanu siostrzanego edycji. admin.supplier.index lub tak. Następnie zostanie zniszczony po przejściu na admin.supplier.edit i ponownie utworzony po przejściu z powrotem i żadne dodatkowe opcje nie są konieczne.

Również jako boczna uwaga myślę, że byłoby dobrze stosować $state.go zamiast $location, gdy tylko jest to możliwe.