Lokalizacja AngularJS $ nie zmienia ścieżki

Mam problem ze zmianą adresu URL strony po przesłaniu formularza.

Oto przepływ mojej aplikacji:

1. Trasy są ustawione, URL jest rozpoznawany do jakiejś strony formularza.
2. Ładowanie strony, kontroler ustawia zmienne, uruchamiane są dyrektywy.
3. Uruchamiana jest specjalna dyrektywa formularza, która wykonuje przesyłanie specjalnego formularza za pomocą AJAX.
4. Po wykonaniu AJAX (Angular nie dba o AJAX), wywoływane jest wywołanie zwrotne, a dyrektywa wywołuje $scope.onAfterSubmitfunkcję, która ustawia lokalizację.

Problem w tym, że po ustawieniu lokalizacji nic się nie dzieje. Próbowałem również ustawić parametr lokalizacji na /... Nie. Próbowałem też nie przesłać formularza. Nic nie działa.

Przetestowałem, aby sprawdzić, czy kod dociera do onAfterSubmitfunkcji (co robi).

Moją jedyną myślą jest to, że w jakiś sposób zakres funkcji został zmieniony (ponieważ została wywołana z dyrektywy), ale z drugiej strony, jak może wywołać, onAfterSubmitjeśli zakres się zmienił?

Oto mój kod

var Ctrl = function($scope, $location, $http) {
  $http.get('/resources/' + $params.id + '/edit.json').success(function(data) {
    $scope.resource = data;
  });

  $scope.onAfterSubmit = function() {
    $location.path('/').replace();
  };
}
Ctrl.$inject = ['$scope','$location','$http'];

Czy ktoś może mi pomóc?

Kilka dni temu miałem podobny problem. W moim przypadku problem polegał na tym, że zmieniłem rzeczy za pomocą biblioteki innej firmy (a dokładniej jQuery) iw tym przypadku chociaż wywoływanie funkcji i ustawianie zmiennych działa, Angular nie zawsze rozpoznaje, że są zmiany, więc nigdy nie trawi.

$ Apply () służy do wykonywania wyrażenia kątowego spoza struktury kątowej. (Na przykład ze zdarzeń DOM przeglądarki, setTimeout, XHR lub bibliotek innych firm).

Spróbuj użyć $scope.$apply()zaraz po zmianie lokalizacji i wywołaniu, replace()aby Angular wiedział, że coś się zmieniło.

Zamiast $location.path(...)zmieniać lub odświeżać stronę, skorzystałem z usługi $window. W Angular ta usługa jest używana jako interfejs do windowobiektu, a windowobiekt zawiera właściwość, locationktóra umożliwia obsługę operacji związanych z lokalizacją lub adresem URL.

Na przykład za pomocą window.locationmożesz przypisać nową stronę, na przykład:

$window.location.assign('/');

Lub odśwież ją, na przykład:

$window.location.reload();

U mnie zadziałało To trochę różni się od tego, czego się spodziewasz, ale działa dla danego celu.

Miałem ten sam problem, ale moje połączenie z $ location było JUŻ w skrócie. Wywołanie $ apply () spowodowało, że podsumowanie $ już trwa.

Ta sztuczka zadziałała (i pamiętaj, aby wstrzyknąć $locationdo kontrolera):

$timeout(function(){ 
   $location...
},1);

Chociaż nie mam pojęcia, dlaczego było to konieczne ...

Musiałem umieścić moje $location.path()oświadczenie w ten sposób, ponieważ moje podsumowanie wciąż działało:

       function routeMe(data) {                
            var waitForRender = function () {
                if ($http.pendingRequests.length > 0) {
                    $timeout(waitForRender);
                } else {
                    $location.path(data);
                }
            };
            $timeout(waitForRender);
        }

W moim przypadku problemem był brak opcjonalnego wskaźnika parametru („?”) W mojej konfiguracji szablonu.

Na przykład:

.when('/abc/:id?', {
    templateUrl: 'views/abc.html',
    controller: 'abcControl'
})


$location.path('/abc');

Bez znaku zapytania trasa oczywiście nie zmieniłaby się, pomijając parametr trasy.

Jeśli ktoś z was korzysta z routera Angular-ui / ui-router, użyj: $state.go('yourstate')zamiast $location. Dla mnie to załatwiło.

To działa dla mnie (w CoffeeScript)

 $location.path '/url/path'
 $scope.$apply() if (!$scope.$$phase)

Moim zdaniem wiele z odpowiedzi wydaje się trochę nietypowych (np. $ Apply () lub $ timeout), ponieważ mieszanie się z $ apply () może prowadzić do niechcianych błędów.

Zwykle, gdy lokalizacja $ nie działa, oznacza to, że coś nie zostało zaimplementowane w sposób kątowy.

W tym konkretnym pytaniu problem wydaje się tkwić w nie-kątowej części AJAX. Miałem podobny problem, w którym przekierowanie za pomocą $ location powinno nastąpić po rozwiązaniu obietnicy. Chciałbym zilustrować problem na tym przykładzie.

Stary kod:

taskService.createTask(data).then(function(code){
            $location.path("task/" + code);
        }, function(error){});

Uwaga: taskService.createTask zwraca obietnicę.

$ q - kątowy sposób używania obietnic:

let dataPromises = [taskService.createTask(data)];
        $q.all(dataPromises).then(function(response) {
                let code = response[0];
                $location.path("task/" + code);
            }, 
            function(error){});

Użycie $ q do rozwiązania obietnicy rozwiązało problem z przekierowaniem.

Więcej o usłudze $ q: https://docs.angularjs.org/api/ng/service/ $ q

setTimeout(function() { $location.path("/abc"); },0);

to powinno rozwiązać twój problem.