web-dev-qa-db-fra.com

"ui-sref" ne rafraîchit pas la "ui-view" (son contrôleur ne se réexécute pas) lorsqu'un lien est cliqué deux fois

Lorsqu'un état est cliqué au début, le div qui possède l'attribut "ui-view" est remplacé par le "modèle" de cet état. Cependant, lorsque je clique à nouveau sur le même état, son contrôleur ne se recharge pas. Comment puis-je recharger ce contrôleur?

Par exemple, supposons que j'ai le menu de navigation suivant:

<nav> 
    <a ui-sref="state1">State 1</a>
    <a ui-sref="state2">State 2</a>
</nav>

Mon contenu "ui-view" est le suivant:

<div ui-view></div>

Mes états sont décrits ci-dessous. Lorsque je clique sur "State1" dans le menu de navigation, je m'attends à observer le texte "Ctrl 1 loaded" sur le developer console. Si c'est la première fois, alors j'observe ce texte. Cependant, lorsque je re-clique sur le même lien, le contrôleur n'est pas chargé à nouveau, c'est-à-dire que je ne pouvais pas voir le texte "Ctrl 1 loaded" affiché deux fois sur la console.

myApp.config(function ($stateProvider, $urlRouterProvider){
    $stateProvider.state("state1", {
        url: "#",
        template: "<p>State 1</p>",
        controller: "Ctrl1"
      }).state("state2", {
        url: "#",
        template: "<p>State 2</p>",
        controller: "Ctrl2"
      });
});

Pourquoi? Avez-vous une idée?

Voici le JSFiddle de cette question.

angularjsangular-uiangular-ui-router
25
ankakusu

Comme Philipp l'a dit, c'est parce que c'est le comportement par défaut de ui-router, MAIS si vous souhaitez recharger votre contrôleur à chaque fois que vous cliquez sur votre lien, vous pouvez réellement utiliser le ui- sref-opts attribut pour le forcer, comme ceci:

<a ui-sref="state1" ui-sref-opts="{reload: true}">State 1</a>

Trouvé cette astuce ici:

https://github.com/angular-ui/ui-router/commit/91a568454cc600aa4f34dedc8a80c9be1130b1c5

J'espère que cela pourrait aider

85
schankam

Syntaxe alternative pour passer à une vue différente, ce serait

<a ui-sref="state1({reload: true})">State 1</a>

Sur le contrôleur, cela ressemblerait à ceci.

$state.go('state1', {}, {reload: true});

Remarque: Le deuxième paramètre de $ state.go est $ stateParams.

12
Rick

Parce que c'est ainsi que ui-router est conçu.

Le contrôleur n'est chargé que lorsqu'il n'est pas dans le même état. ui-router ne réexécutera pas un contrôleur et ne réévaluera pas un modèle de vue. Même lorsque vous utilisez le même contrôleur sur plusieurs états et basculez entre ceux-ci, le contrôleur ne se réexécutera pas.

Si vous souhaitez exécuter une fonctionnalité lorsque la vue change, vous pouvez écouter les événements , ou même mettre un ng-click sur votre élément a.

3
Philipp Gayret

utilisez simplement le code ci-dessous

$stateProvider.
  state('myPage', {
    url: '/',
    cache: false // add this line
1
Ravi Rajindu