AngularJS Paging avec $ location.path mais pas de rechargement de ngView

Question

Mon single page application charge une page d'accueil et je veux afficher une série d'idées. Chacune de ces idées est affiché dans une animation flash conteneur, avec des animations affiche de cycle entre les idées.

Les idées sont chargées à l'aide de $http: $champ d'application.flash = new FlashInterface portée:$étendue,de l'emplacement: emplacement$

$http.get("/competition.json")
  .success (data) ->
    $scope.flash._init data

Toutefois, pour bénéficier de l'histoire de la navigation et de UX je souhaite mettre à jour la barre d'adresse pour afficher l'url correcte pour chaque idée à l'aide de $emplacement:

$location.path "/i/#{idea.code}"
$scope.$apply()

Je demande $s'appliquent ici parce que cet événement vient de l'extérieur de la AngularJS contexte ie Flash. J'aimerais que l'actuel contrôleur/vue pour rester et pour le point de vue de ne pas recharger. C'est très mauvais parce que le rechargement d'afficher les résultats dans l'ensemble de l'objet flash étant jetés et le preloader cycle recommence.

J'ai essayé d'écoute pour $routeChangeStart faire un preventDefault:

$scope.$on "$routeChangeStart", (ev,next,current) ->
  ev.preventDefault()
$scope.$on "$routeChangeSuccess", (ev,current) ->
  ev.preventDefault()

mais en vain. L'ensemble serait hunky dory si je pouvais trouver un moyen de passer outre l'avis de recharger quand je change l'emplacement$.chemin d'accès.

Je suis encore très en sentant mon chemin autour de AngularJS donc, je serais heureux de tous les pointeurs sur la façon de structurer l'application pour atteindre mon objectif!

Answer 1

au lieu de mettre à jour le chemin, il suffit de mettre à jour le paramètre de requête avec un numéro de page.

paramétrez votre route pour ignorer les modifications des paramètres de requête:

 ....
$routeProvider.when('/foo', {..., reloadOnSearch: false})
....
 

et dans votre mise à jour d'application $ location avec:

 ...
$location.search('page', pageNumber);
...
 

Answer 2

À partir de ce blog:

par défaut, toutes les modifications de l'emplacement d'aller à travers le processus de routage, qui les mises à jour de l'angle de vue.

Il y a un moyen simple de court-circuit, cependant. Angulaire montres pour un changement de localisation (si elle est accomplie par le biais de la saisie dans la l'emplacement de la barre, en cliquant sur un lien ou de la définition de l'emplacement par le biais de $location.path()). Lorsqu'il détecte ce changement, il diffuse une l'événement, $locationChangeSuccess, et commence le processus de routage. Ce nous avons à faire est de capturer l'événement et de réinitialiser la route pour ce que c'était précédemment.

function MyCtrl($route, $scope) {
    var lastRoute = $route.current;
    $scope.$on('$locationChangeSuccess', function(event) {
        $route.current = lastRoute;
    });
}

Answer 3

Ma solution a été d'utiliser le $routeChangeStart car cela vous donne le "suivant" et "dernier" itinéraires, vous pouvez les comparer sans avoir besoin d'une variable supplémentaire comme sur $locationChangeSuccess.

L'avantage est de pouvoir accéder à la "params" bien sur "suivant" et "dernier" routes, comme next.params.yourproperty lorsque vous utilisez le "/propriété/valeur" URL de style et de cours d' $location.url ou $location.path de changer l'URL à la place de $location.search() qui en dépend "?propriété=valeur" URL de style.

Dans mon cas, je l'ai utilisé non seulement pour, mais aussi pour prévenir la voie du changement est le contrôleur n'a pas changé:

$scope.$on('$routeChangeStart',function(e,next,last){
  if(next.$$route.controller === last.$$route.controller){
    e.preventDefault();
    $route.current = last.$$route;
    //do whatever you want in here!
  }
});

Personnellement, je me sens comme AngularJS devrait fournir un moyen de le contrôler, pour l'instant, ils supposent que chaque fois que vous modifiez le navigateur de l'endroit où vous voulez changer l'itinéraire.

Answer 4

Vous devriez charger $location via l'injection de dépendance et utiliser les éléments suivants:

 $scope.apply(function () {
    $location.path("yourPath");
}
 

N'oubliez pas que vous ne devez pas utiliser de hashtags (#) lorsque vous utilisez $location.path . C'est pour la compatibilité pour le mode HTML5.

Answer 5

L' $locationChangeSuccess événement est un peu une approche par force brute, mais j'ai trouvé que la vérification du chemin nous permet d'éviter la page est rechargée lorsque la voie de chemin de modèle est inchangé, mais la recharge de la page lors de la commutation d'une route différente de modèle:

var lastRoute = $route.current;
$scope.$on('$locationChangeSuccess', function (event) {
    if (lastRoute.$$route.originalPath === $route.current.$$route.originalPath) {
        $route.current = lastRoute;
    }
});

Ajouter ce code à un contrôleur spécifique permet le rechargement de plus en plus intelligents.

Edit: Tout cela rend un peu plus facile, en fin de compte je n'aime pas la complexité du code, j'ai écrit à garder conviviale à la recherche de l'URL. En fin de compte, j'ai juste passé à un paramètre de recherche et angulaire gère beaucoup mieux.