Angulaire de l'INTERFACE utilisateur du Routeur Recharger Contrôleur à l'Arrière Appuyez sur le Bouton de

J'ai un parcours qui peut avoir de nombreuses options de paramètres de la requête:

$stateProvider.state("directory.search", {
                url: '/directory/search?name&email',
                templateUrl: 'view.html',
                controller: 'controller'

Lorsque l'utilisateur remplit le formulaire pour rechercher le répertoire d'une fonction dans la $scope les changements de l'état d'origine du contrôleur pour recharger:

 $scope.searchDirectory = function () {
            $state.go('directory.search', {
                name: $scope.Model.Query.name,
                email: $scope.Model.Query.email
            }, { reload: true });                   
        };

Dans le controller j'ai une condition: if($state.params){return data} dicter si oui ou non mon service va être interrogé.

Cela fonctionne très bien, sauf si l'utilisateur clique sur le fureteur de l'avant et/ou arrière boutons. Dans ces deux cas, l'état (route) modifie les paramètres de requête correctement, mais ne recharge pas la controller.

De ce que j'ai lu le contrôleur sera rechargé uniquement si les changements de route. Est-il de toute façon pour que cet exemple fonctionne uniquement à l'aide de paramètres de requête ou dois-je utiliser un changement de route?

OriginalL'auteur miniscem | 2015-05-05

  1. 6

    Vous devriez écouter l'événement pour réussir à bien les changements de page, $locationChangeSuccess. La caisse de la documentation pour elle https://docs.angularjs.org/api/ng/service/$lieu.

    Il y a aussi une question similaire a répondu sur donc ici Comment détecter le bouton précédent du navigateur cliquez sur l'événement à l'aide angulaire?.

    Lorsque cet événement se déclenche, vous pouvez mettre tout ce logique que vous exécutez sur pageload que vous avez besoin pour exécuter lorsque le contrôleur initialise.

    Quelque chose comme: 

    $rootScope.$on('$locationChangeSuccess', function() {
    $scope.searchDirectory()
});

    Ou mieux d'installation comme: 

    var searchDirectory = function () {
    $state.go('directory.search', {
        name: $scope.Model.Query.name,
        email: $scope.Model.Query.email
    }, { reload: true });

$scope.searchDirectory = searchDirectory;

$rootScope.$on('$locationChangeSuccess', function() {
    searchDirectory();
});
    J'ai été capable de trouver une solution en utilisant les liens que vous avez posté. Ma réponse est ci-dessous. Il semble curieux que le $locationChangeSuccess événement et le $rootScope.$watch placé sur $location.absUrl() été tiré à plusieurs reprises. Voir les commentaires et conditionnelle à l'intérieur de la $rootScope.$watch appel.

    OriginalL'auteur Andrew Clavin

  2. 1

    À l'aide de ce qui précède, j'ai été capable de trouver une solution à mon problème:

    contrôleur (extrait de code):

    ...var searchDirectory = function (searchParams) {

            if (searchParams) {
                $scope.Model.Query.name = searchParams.name;
                $scope.Model.Query.email = searchParams.email;
            }

            $state.go('directory.search', {
                name: $scope.Model.Query.name,
                email: $scope.Model.Query.email,
            }, { reload: true });                   
        };...

       $rootScope.$on('$locationChangeSuccess', function () {
            //used $location.absUrl() to keep track of query string
            //could have used $location.path() if just interested in the portion of the route before query string params
            $rootScope.actualLocation = $location.absUrl(); 
        });

        $rootScope.$watch(function () { return $location.absUrl(); }, function (newLocation, oldLocation) {
            //event fires too often? 
            //before complex conditional was used the state was being changed too many times causing a saturation of my service
            if ($rootScope.actualLocation && $rootScope.actualLocation !== oldLocation && oldLocation !== newLocation) {
                searchDirectory($location.search());
            }
        });

        $scope.searchDirectory = searchDirectory;

 if ($state.params && Object.keys($state.params).length !== 0)
{..call to service getting data...}

    Cette solution se sent plus comme un cadre traditionnel tels que .net web formulaires où le dev a à effectuer certaines actions en fonction de l'état de la page. Je pense que ça vaut le compromis d'avoir lisibles à la requête de paramètres dans l'URL.

    OriginalL'auteur miniscem