CODEWITHSUNDEEP
javascripthtmlangularjstemplates
Thomas
Thomas

Reputation: 1140

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

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

Upvotes: 28

Views: 85766

Answers (1)

Mike Quinlan
Mike Quinlan

Reputation: 2882

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

Upvotes: 50

Related Questions