Angular.js : How to use ng-href in template?

javascript html angularjs templates

85,218

ngHref is used to dynamically bind angular variables to the href attribute like so:

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

Where in your scope:

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

Then after angular compiles it, it looks like this:

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

If your path is hardcoded into the page (you know where the link should take you on page load), you can just specify it in an href, which is why your third example works. Only use ngHref when you need angular to decide the route dynamically after the JS loads. This prevents your user from clicking links and going to an invalid route before angular has deciphered where the link should point. Documentation here

85,218

Author by

Thomas

You can find me on social networks to contact me : http://thomasNDS.github.com

Updated on May 23, 2020

Comments

Thomas almost 4 years

I try to create a simple SPA with 1 index.html which include templates.

I got a problem with ng-href directive:

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

work in index.html but not in my templates, the link is unclickable. but href still works.

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

My app :

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>

I don't understand the problem with ng-href and why the result is different than href. I use angular 1.2