Jump to a specific location inside nested html - html

Question

I have a parent search.html and inside that I am including another html search-form.html and attribute.html through ng-include.
Now the inner html search-form.html has another inner html searchresults.html which has a anchor tag onclick of that I want to point to attribute.html which is included in the parent search.html.
My search.html code :
<div class="panel panel-primary">
<!-- Search FORM + RESULTS Panels -->
<div ng-include="'modules/search/tp/search-form.html'">
</div>
<div ng-show="isAttributeResultExist()">
<!--Include ATTRIBUTES PANEL -->
<div ng-include="'modules/search/attribute.html'">
</div>
</div>
search-form.html code:
<!--Search RESULTS Tab: Individual-->
<div ng-show="isPersonSearch()">
<div ng-include="'modules/search/searchresults.html'">
</div>
</div>
searchresults.html anchor tag :
<a href="#" ng-click="buildDetails(searchResult.person.Id);">
<i class="fa fa-fw fa-search fa-lg"></i>
</a>
I want to click the anchor tag inside this searchresults.html and jump to start of attribute.html inside search.html.
How to do that?

Answer 1

Inside your search.html, add an id to the div that loads your attributes.
<div id="jumpHere" ng-include="'modules/search/attribute.html'">
Normally you could just add that id to an anchor tag on your page and you would jump to that section of the page.
Jump to section
However, it appears that you are using Angular and would need to work in the location into your buildDetails() method. You want to use the $location service.
$scope.buildDetails = function() {
//other functionality here
$location.path('jumpHere');
};