Geek Answers Handbook

How to go to snap in partial view angular?

I have many items in a long list. How can my users go to (e.g. bookmark) a specific item by visiting mypage.html # the_item_id?

Actually, this can be when I use the built-in view [Example 1], but not when I use the partial view [Example 2]. Is there a mistake in the latter case, or should I use any workaround?

Thanks in advance!

Example 1: you can visit page.html # a100 to see element 100 ::

<!doctype html> <html ng-app> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <script> function MainCtrl($scope){ $scope.items = []; for(var i=0; i<200; i++){$scope.items.push({id: i})} } </script> </head> <body ng-controller='MainCtrl'> <div> <ul> <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li> </ul> </div> </body> </html>

Sample 2: CANNOT point to page2.html # a100 to see item 100, WHY? ::

 <!doctype html> <html ng-app> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <script> function MainCtrl($scope){ $scope.items = []; for(var i=0; i<200; i++){$scope.items.push({id: i})} } </script> </head> <body ng-controller='MainCtrl'> <div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div> </body> </html>

And this is scroll_view.html needed for example 2 ::

 <div> <ul> <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li> </ul> </div>
+6
source share
2 answers

You must use the autoscroll attribute for ng-include.

Check out the docs here: http://docs.angularjs.org/api/ng.directive:ngInclude

autoscroll (optional) - {string =} - whether ngInclude should call $ anchorScroll to scroll the viewport after loading the content. If the attribute is not set, disable scrolling. If the attribute is set without a value, enable scrolling. Otherwise, enable scrolling only if the expression evaluates to true.

So in your case:

 <div ng-include="'scroll_view.html'" autoscroll></div>
+5
source

I think html5Mode needs to be set to true, but I'm not sure. See if this works for you (it was for me, but I only tested in Chrome 23 loading the page using the file: /// ...):

 <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <script src="app.js"></script> <script type="text/ng-template" id="scroll_view.html"> <div> <ul> <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li> </ul> </div> </script> <script> function MainCtrl($scope){ $scope.items = []; for(var i=0; i<200; i++){$scope.items.push({id: i})} } </script> </head> <body ng-controller='MainCtrl'> <div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div> </body> </html>

app.js:

 var app = angular.module('app', []). config(function($locationProvider) { $locationProvider.html5Mode(true); })
+1
source

More articles:


All Articles