web-dev-qa-db-fra.com

Angular.js: Comment utiliser ng-href dans un template?

J'essaie de créer un spa simple avec 1 index.html qui inclut des modèles.

J'ai un problème avec la directive ng-href:

 <a ng-href="#/myPage">myPage</a>

travailler dans index.html mais pas dans mes modèles, le lien est non cliquable. mais href fonctionne toujours.

<a href="#/myPage">myPage</a>

Mon application:

index.html:

...
<body ng-app="myApp">
    <a ng-href="#/myPage" target="_self">link</a> <!-- work ! -->
    <div class="container" ng-view=""></div>
</body>
...

app.js:

'use strict';

angular.module('myApp',
        [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute' ]).config(
        function($routeProvider) {
            $routeProvider.when('/', {
                templateUrl : 'views/main.tpl.html',
                controller : 'MainCtrl'
            })

            .when('/myPage', {
                templateUrl : 'views/page.tpl.html',
                controller : 'MainCtrl'
            })

            .otherwise({
                redirectTo : '/'
            });
        });

controller.js

'use strict';

    myApp.controller('MainCtrl', function() {
        this.myColor = 'blue';
    });

page.tpl.html

<div>
    <a ng-href="#/myPage" target="_self">link</a> <!-- Dont work -->
    <a ng-href="#/myPage" target="_self">link</a> <!-- Dont work -->
    <a ng-href="#/myPage{{}}">link</a> <!-- Dont work -->
    <a ng-href="#/{{ 'myPage' }}">link</a> <!-- Dont work -->
    <a href="#/myPage" target="_self">link</a> <!-- Work ! -->
</div>

Je ne comprends pas le problème avec ng-href et pourquoi le résultat est différent de href. J'utilise angular 1.2

javascripthtmlangularjstemplates
27
Thomas

ngHref est utilisé pour relier dynamiquement angular à l'attribut href comme suit:

<a ng-href="#/{{myPathVariable}}"/>Take Me Somewhere</a>

Où dans votre portée:

$scope.myPathVariable = 'path/to/somewhere';

Puis après que angular le compile, cela ressemble à ceci:

<a ng-href="#/path/to/somewhere" href="#/path/to/somewhere" ... other angular attributes>Take Me Somewhere</a>

Si votre chemin est codé en dur dans la page (vous savez où le lien devrait vous emmener au chargement de la page), vous pouvez simplement le spécifier dans un href, c'est pourquoi votre troisième exemple fonctionne. Utilisez uniquement ngHref lorsque vous avez besoin de angular pour choisir l’itinéraire dynamiquement après le chargement du JS. Ceci évite que votre utilisateur clique sur des liens et accède à un itinéraire non valide avant angular a déchiffré où le lien doit pointer. Documentation ici

48
Mike Quinlan