Angular.js : Comment utiliser ng-href modèle?

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

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

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

travail dans index.html mais pas dans mes modèles, le lien est unclickable. 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 angulaire 1.2

InformationsquelleAutor Thomas | 2014-05-22
  1. 48

    ngHref est utilisé pour lier dynamiquement les variables angulaires de l'attribut href de la sorte:

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

    Où dans votre périmètre:

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

    Puis après angulaire compile, ça ressemble à ça:

    <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 prendre au chargement de la page), vous pouvez le spécifier dans un href, c'est pourquoi votre troisième exemple fonctionne. Utilisez uniquement ngHref quand vous en avez besoin angulaire pour décider de l'itinéraire de façon dynamique après la JS charges. Cela empêche l'utilisateur de cliquer sur des liens et d'aller à une défaillance de la route avant angulaire a déchiffré où le lien doit pointer. Documentation ici

    • Ok, mais alors pourquoi <ng-href="#/{{ 'mapage' }}">lien</a> Ne fonctionnent pas dans les modèles ?
    • Qui ne fonctionne pas parce que vous êtes de passage myPage comme un littéral de chaîne au lieu d'une variable dans l'attribut
    • Je recommande l'ajout de vide href étiquette pour vous assurer que le navigateur ramasser comme un lien: <a href="" ng-href="#/{{myPathVariable}}"/>Me Prendre quelque part</a>
    • Eh bien, la ng-href directive ajouter et remplacer le vide attribut href pour vous, donc pas de réel besoin.
    • J'ai ng-href="#!/database/{{home.uuidSelectedDatabase}}/segments?{{goToSegmentsUrlQuery}}" et il est toujours affiché, aucune question n'est goToSegmentsUrlQuery déjà défini dans la portée ou pas 🙁
    • <a class="nav-link" href="#!/search"><span>Text</span></a> de travail pour me coder en dur la route

    InformationsquelleAutor Mike