Menu
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
955
The ng-href directive overrides the original href attribute of an <a> element. The ng-href directive should be used instead of href if you have AngularJS code inside the href value. The ng-href directive makes sure the link is not broken even if the user clicks the link before AngularJS has evaluated the code.
In Angular, href is no longer used for routing. Routing uses routerLink , as shown in the following example. For more information on routing, see Defining a basic route in the Routing & Navigation page.
Link can be added to the Button by adding e-link using cssClass property and <a> tag with href attribute should be added inside the button element.
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
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
