Comment/quand utiliser ng-cliquez pour appeler un itinéraire?
Supposons que vous êtes en utilisant les voies:
//bootstrap
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutCtrl'
});
...
Et dans votre code html, vous voulez naviguer sur la page quand on clique sur un bouton. Un autre moyen serait
<a href="#/about">
... mais il semble ng-cliquez sur serait utile ici.
- Est cette hypothèse est correcte? Que ng-click être utilisé à la place de l'ancre?
- Si oui, comment cela fonctionnerait-il? C'est à dire:
<div ng-click="/about">
- double possible de Comment puis-je changer de vue dans AngularJS à partir d'un contrôleur de fonction?
- ui-sref Voir cette réponse: stackoverflow.com/a/21105057/2539811
Vous devez vous connecter pour publier un commentaire.
Itinéraires de surveiller la
$location
service et de répondre aux changements dans l'URL (généralement par le biais de la table de hachage). Pour "activer" un itinéraire, il vous suffit de modifier l'URL. La façon la plus simple de le faire est avec des balises d'ancrage.Rien de plus compliqué n'est nécessaire. Si, toutefois, vous devez le faire à partir du code, de la bonne façon est d'utiliser l'
$location
service:Qui, par exemple, un bouton permet de déclencher:
hash
servir à deux fins, mais en fonction des circonstances peut avoir le même effet. Pour la plupart des cas, un strict de routage (surtout avechtml5mode
activé),path
sera canonique de choix. J'ai mis à jour la réponse à tenir compte de cela.<a href="/next.html">Next</a>
le navigateur recharge la page, il n'est pas intercepté par le routeur. Dois-je le faire avec le code alors?/
. Si vous servez de l'application à partir de/app/index.html
, alors cela ne fonctionnera pas parce que l'URL absolue est/app/next.html
. Évidemment, le serveur doit être configuré pour renvoyer votreindex.html
fichier lorsqu'il est frappé à/next.html
. N'hésitez pas à poster un Plunker/Violon si vous voulez moi de prendre un coup d'oeil.go
méthode pour chaque contrôleur? (Ou de créer une racine contrôleur avec ungo
méthode?)<button click-go="/home">Click</button>
. La fonction de lien ne serait ce:element.on("click", function () { $location.path(attrs.clickGo); });
ngTap
directive-je créer unng-tap-go
directive :\url
est sensible à la casse et une seule lettre peut vous donner un bon mal de tête comme il m'a donné 😉$locationProvider.hashPrefix('!');
il est nécessaire de mettre à jour les itinéraires de#!/wherever
.Voici une bonne astuce que personne n'a mentionné. Dans le contrôleur de la fonction est à l'intérieur, vous devez inclure le fournisseur d'emplacement:
À l'aide d'un attribut personnalisé (mise en œuvre d'une directive) est peut-être la façon la plus propre. Voici ma version, basée sur @Josh et @sean suggestions.
Il a quelques fonctionnalités utiles, mais je suis nouveau sur Angulaire, donc il y a probablement de la place pour l'amélioration.
clickLink
des modifications d'attributs, la directive permettra d'ajouter le nouveau gestionnaire de clic, mais laisser l'ancien en place. Le résultat pourrait être un peu chaotique. J'ai d'abord écrit ce à utiliser dans une situation où leclickLink
attribut ne changerait jamais, donc je n'ai jamais attaché à cette extrémité libre. Je pense que la résolution de ce bug permettraient effectivement de plus simple code - je pourrais essayer de le faire quand j'ai le temps (ha!)attrs.$observe
était là. Merci pour vos suggestions.Rappelez-vous que si vous utilisez ng-cliquez pour le routage, vous ne serez pas en mesure de cliquer droit sur l'élément et choisissez "ouvrir dans un nouvel onglet" ou ctrl en cliquant sur le lien. J'essaie d'utiliser ng-href quand en vient à la navigation. ng-click est préférable de l'utiliser sur des boutons pour des opérations ou des effets visuels tels que l'effondrement.
Mais
Sur
Je ne recommanderais pas. Si vous modifiez l'itinéraire que vous pourriez avoir besoin de changer beaucoup de placé dans l'application. Ont une méthode retournant le lien. ex:
À propos de. Cette méthode vous place dans un utilitaire
J'ai utilisé
ng-click
directive pour appeler une fonction, tout en demandant à la route templateUrl, de décider qui<div>
doit êtreshow
ouhide
à l'intérieur de la route templateUrl page ou pour les différents scénarios.AngularJS 1.6.9
Permet de voir un exemple, lorsque dans la page de routage, j'ai besoin de l'ajouter
<div>
ou modifier<div>
, que je contrôle à l'aide du contrôleur de parent modèles$scope.addProduct
et$scope.editProduct
booléenne.RoutingTesting.html
HTML:
TestingPage.html
HTML:
les deux pages -
RoutingTesting.html
(parent),TestingPage.html
(la page de routage) sont dans le même répertoire,Espère que cela aidera quelqu'un.
Une autre solution, mais sans l'aide de ng-click qui fonctionne toujours, même pour d'autres balises que
<a>
:De cette façon, vous pouvez aussi passer des paramètres à votre itinéraire: https://stackoverflow.com/a/40045556/838494
(C'est mon premier jour avec angulaire. Doux commentaires sont les bienvenus)
Vous pouvez utiliser:
Si vous voulez de la dynamique de la variable à l'intérieur de href vous pouvez le faire comme ça:
Où lien est Angulaire de la portée de la variable.
ng-click
de changement de lieu.juste le faire comme suit
dans votre code html écrire:
Et dans votre contrôleur, ajouter $état comme suit: