In my front end I have a simple index.html that I have placed a ng-view tag in it as follows:
<body>
<div data-ng-controller="MainController">
<ng-view> <ng-view/>
</div>
My routes.js file is something like this:
(function() {
angular.module('mainApp')
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when("/", {
templateUrl: "/startbootstrap-landing-page/home.html"
});
$routeProvider.when("/products", {
templateUrl: "/views/products.html"
});
$routeProvider.otherwise({ redirectTo: '/' });
}]);
})();
When I enter "mywebsite.com/index.html#/" based on the routing in routes.js it will load "/startbootstrap-landing-page/home.html" in the div tag where ng-view is placed. So everything works perfectly till here. But the problem is I have used local addressing/linking tags inside the home.html that they stop working once I load the home.html partial view inside the ng-view div tag. For example I have used something like this in my home.html partial view:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
So when I click on for example "Contact" it has to jump to the bottom of my designed page where I have used a tag such as this:
<a name="contact"></a>
. . .
But it does not.
The home.html page works perfectly with its local # addressing/linking when used as a standalone html file with html and body tags but its local linking functionality wont work anymore when used as a partial view loaded inside the ng-view tag. Any ideas as to why this happens? Thanks.
