web-dev-qa-db-fra.com

Comment/quand utiliser ng-click pour appeler un itinéraire?

Supposons que vous utilisiez des itinéraires:

// 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 html, vous voulez naviguer vers la page à propos lorsqu'un bouton est cliqué Une façon serait 

<a href="#/about">

... mais il semble que ng-click serait utile ici aussi.

  1. Cette hypothèse est-elle correcte? Que ng-click soit utilisé à la place d'ancre?
  2. Si oui, comment cela fonctionnerait-il? C'EST À DIRE: 

<div ng-click="/about">

angularjsroutesangularjs-routingangularjs-ng-clickangularjs-ng-route
242
Robert Christian

Les itinéraires surveillent le service $location et répondent aux modifications d'URL (généralement via le hachage). Pour "activer" un itinéraire, il vous suffit de modifier l'URL. Le moyen le plus simple de le faire est d'utiliser des balises d'ancrage.

<a href="#/home">Go Home</a>
<a href="#/about">Go to About</a>

Rien de plus compliqué n'est nécessaire. Si, toutefois, vous devez le faire à partir de code, la méthode appropriée consiste à utiliser le service $location:

$scope.go = function ( path ) {
  $location.path( path );
};

Ce qui, par exemple, un bouton pourrait déclencher:

<button ng-click="go('/home')"></button>
428
Josh David Miller

Voici un bon conseil que personne n'a mentionné. Dans le contrôleur dans lequel se trouve la fonction, vous devez inclure le fournisseur d'emplacement:

app.controller('SlideController', ['$scope', '$location',function($scope, $location){ 
$scope.goNext = function (hash) { 
$location.path(hash);
 }

;]);

 <!--the code to call it from within the partial:---> <div ng-click='goNext("/page2")'>next page</div>
81
sean

Utiliser un attribut personnalisé (implémenté avec une directive) est peut-être le moyen le plus propre. Voici ma version, basée sur les suggestions de @Josh et @ sean.

angular.module('mymodule', [])

// Click to navigate
// similar to <a href="#/partial"> but hash is not required, 
// e.g. <div click-link="/partial">
.directive('clickLink', ['$location', function($location) {
    return {
        link: function(scope, element, attrs) {
            element.on('click', function() {
                scope.$apply(function() {
                    $location.path(attrs.clickLink);
                });
            });
        }
    }
}]);

Il a quelques fonctionnalités utiles, mais je suis nouveau sur Angular, donc il y a probablement place à amélioration.

33
Bennett McElwee

Rappelez-vous que si vous utilisez ng-click pour le routage, vous ne pourrez pas cliquer avec le bouton droit de la souris sur l'élément et choisir "Ouvrir dans un nouvel onglet" ou cliquez sur le lien en cliquant sur la touche Ctrl. J'essaie d'utiliser ng-href quand vient la navigation. ng-click est préférable d'utiliser des boutons pour des opérations ou des effets visuels tels que le repli. Mais À propos de .__ Je ne recommanderais pas. Si vous modifiez l'itinéraire, vous devrez peut-être modifier plusieurs éléments de l'application. Avoir une méthode retournant le lien. ex: À propos de. Cette méthode que vous placez dans un utilitaire

4
Jens Alenius

Une autre solution mais sans utiliser ng-click, qui fonctionne même pour d'autres tags que <a>:

<tr [routerLink]="['/about']">

De cette façon, vous pouvez également transmettre des paramètres à votre route: https://stackoverflow.com/a/40045556/838494

(C’est mon premier jour avec Angular. Les commentaires sont les bienvenus.)

1
Albert Hendriks

J'ai utilisé la directive ng-click pour appeler une fonction, tout en demandant l'itinéraire templateUrl, pour décider quel <div> doit être show ou hide dans la page d'itinéraire templateUrl ou pour différents scénarios.

AngularJS 1.6.9

Voyons un exemple. Lorsque, dans la page de routage, il me faut soit add <div> soit modifier <div>, que je contrôle à l’aide des modèles de contrôleur parent $scope.addProduct et $scope.editProduct boolean.

RoutingTesting.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
    <script>
        var app = angular.module("MyApp", ["ngRoute"]);

        app.config(function($routeProvider){
            $routeProvider
                .when("/TestingPage", {
                    templateUrl: "TestingPage.html"
                });
        });

        app.controller("HomeController", function($scope, $location){

            $scope.init = function(){
                $scope.addProduct = false;
                $scope.editProduct = false;
            }

            $scope.productOperation = function(operationType, productId){
                $scope.addProduct = false;
                $scope.editProduct = false;

                if(operationType === "add"){
                    $scope.addProduct = true;
                    console.log("Add productOperation requested...");
                }else if(operationType === "edit"){
                    $scope.editProduct = true;
                    console.log("Edit productOperation requested : " + productId);
                }

                //*************** VERY IMPORTANT NOTE ***************
                //comment this $location.path("..."); line, when using <a> anchor tags,
                //only useful when <a> below given are commented, and using <input> controls
                $location.path("TestingPage");
            };

        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="HomeController">

    <div ng-init="init()">

        <!-- Either use <a>anchor tag or input type=button -->

        <!--<a href="#!TestingPage" ng-click="productOperation('add', -1)">Add Product</a>-->
        <!--<br><br>-->
        <!--<a href="#!TestingPage" ng-click="productOperation('edit', 10)">Edit Product</a>-->

        <input type="button" ng-click="productOperation('add', -1)" value="Add Product"/>
        <br><br>
        <input type="button" ng-click="productOperation('edit', 10)" value="Edit Product"/>
        <pre>addProduct : {{addProduct}}</pre>
        <pre>editProduct : {{editProduct}}</pre>
        <ng-view></ng-view>

    </div>

</body>
</html>

TestingPage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .productOperation{
            position:fixed;
            top: 50%;
            left: 50%;
            width:30em;
            height:18em;
            margin-left: -15em; /*set to a negative number 1/2 of your width*/
            margin-top: -9em; /*set to a negative number 1/2 of your height*/
            border: 1px solid #ccc;
            background: yellow;
        }
    </style>
</head>
<body>

<div class="productOperation" >

    <div ng-show="addProduct">
        <h2 >Add Product enabled</h2>
    </div>

    <div ng-show="editProduct">
        <h2>Edit Product enabled</h2>
    </div>

</div>

</body>
</html>

les deux pages - RoutingTesting.html (parent), TestingPage.html (page de routage) sont dans le même répertoire,

J'espère que cela aidera quelqu'un.

1
ArifMustafa

Vous pouvez utiliser:

<a ng-href="#/about">About</a>

Si vous voulez des variables dynamiques dans href vous pouvez faire comme ceci:

<a ng-href="{{link + 123}}">Link to 123</a>

Où link est une variable de portée angulaire.

0
Sohail xIN3N

faites-le simplement comme suit

<button ng-click="going()">goto</button>

Et dans votre contrôleur, ajoutez $ state comme suit: 

.controller('homeCTRL', function($scope, **$state**) {

$scope.going = function(){

$state.go('your route');

}

})
0
LucasMugi