Going to a specific section from exterior link - html

Question

I am trying to create an anchor in order to be able to build such an URL :
www.mysite.com/#myAnchor
which should automatically link to the div wanted, even from an exterior website.
However, when I am trying to implement it, here is the adresse to which I am redirected : www.mysite.com/#/myAnchor
So far, I tested different things such as :
<a name="myAnchor" />
<a name="#myAnchor"></a>
<a name="myAnchor"></a>
<span class="anchor " id="myAnchor"></span>
But nothing seems to work.
However when I am on the page I can change the url to go there but from "outside" this just redirects to the top of the page.
Thanks for your help.

Answer 1

That most likely happens because the first anchor is done by the browser, and when the page loads for the first time I assume the content is not all loaded yet (using views?).
If that is the case, then you need to call the service $anchorScroll that angular provides somewhere in your code after the view has been loaded (on a ng-init maybe?). Something like
<a name="myAnchor" ng-init="loadScrollToAnchor()"></a>
And then in your controller, after injecting the service $anchorScroll.
var scrolled = true;
$scope.loadScrollToAnchor = function () {
if ( !scrolled ) {
$anchorScroll();
scrolled = true;
}
};
Update: The scrolled variable is there to make sure that the code is only executed once (at page load), and thus this code should reside in an application-wise controller and not a controller specific to a route or view. However, there are still some shortcomings to this approach that might need to be countered, like if the view that the user loads the page first has no ng-init calling the function, and then he moves to another view that does: the code will execute, and the user viewport will possibly be changed against the user's intents.

Answer 2

To solve it, I actually only had to add this line of code without anything else :
This is doing the trick.