Tell me please, how can I disable auto-upto top of my page?
If I use hash nav:
Goto index
my page doest up to top, but if I use AngularJS:
Html:
<a ng-href="#/index">Goto index</a>
JS:
$routeProvider.
when('/index', {
template:'...',
controller: 'RouteCtrl'
})
my page scrolled to top. How can I disable it?
I find it a bit strange that your plain href doesn't scroll and ng-href scrolls, I thought it was the other way round...
But, to the solution; It's up to the browser to scroll on hash changes, so usually to disable it you need to intercept and preventDefault() the event and then change the location by yourself. When using Angular, you can either define some attribute directive for the <a> element or just define your own a directive.
If you use ng-view, it relies on $anchorScroll service with view updates to simulate the behaviour what the browser would normally do, as Angular already intercepts the event. You can prevent the scroll on view load by providing your own $anchorScroll which does nothing:
angular.module('yourModule', []).value('$anchorScroll', angular.noop);
As indicated in the AngularJS documentation, the proper way to do this is:
angular.module('yourModule',[]).config( ['$anchorScrollProvider',
function($anchorScrollProvider) {
$anchorScrollProvider.disableAutoScrolling();
}]
);
just try
assessmentApp.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll = angular.noop;
}])
Related
TL;DR: With Angular UI Router, is it possible to autoscroll to a view of the same state that the template displaying it belongs to?
The Setup
I have an Angular 1.4.1 app, using UI Router 0.2.15 and Angular Material 0.10.0.
Example Plunk
There is a parent state called website and three child states: home, foo and bar.
The parent state has a wrapper view, which is displayed via the <ui-view> tag in index.html. It also has two other views, header#website and footer#website, which it displays via the wrapper view template.
Each of the three child states has a main view, which is displayed via the parent state's wrapper view template.
What I Expect
In the parent state's wrapper view template, when I set autoscroll="true" on the ui-view tag for the header#website view, I expect that the page will scroll to the top whenever the state changes. See the accepted answer of this SO question.
What Is Happening
When any of the ui-sref links in the footer is clicked, the page does not scroll to the top.
What I've Tried
If I put autoscroll="true" on the ui-view tag for the main view, it works as expected. This is not what I want, however, because the header is hidden from view even when you navigate to a state from the address bar.
What I Suspect
I think the problem has to do with the fact that header#website is a view that belongs to the website state, and that autoscroll only works for views that normally are displayed on the current template. In other words, normally the header view would be displayed via index.html, not wrapper.html.
The Question
Is my suspicion above correct? Do I need to refactor, or is there a way to make this work as is?
Thanks in advance!
Though I don't advocate DOM manipulation outside of a directive, a quick and dirty solution would be to add a scrollTo method in a .run block of your top level module definition, for ex:
.run(function ($window, $rootScope) {
$rootScope.$on('$viewContentLoaded', function () {
var interval = setInterval(function () {
if (document.readyState == "complete") {
window.scrollTo(0, 0);
clearInterval(interval);
}
}, 1);
});
})
http://plnkr.co/edit/qPqy69o7F9aTjNbUTMGY?p=preview
(borrowed from here https://stackoverflow.com/a/22166553/1516309)
I tried using the $anchorScroll() method of ui-router, but since your links are at the bottom of the page, thats where the page scrolls to, so you dont actually notice it doing anything.
From my AngularJS Home Page I need to scroll to an anchor tag in another page. Both these pages are coming as partial html's into the ng-view component, based on the url. On starting the server, the home page is loaded and from there in need to go to the faq page. I used the normal href with #, but that didn't point to the correct div in the target page. Here is what I tried with $anchorScroll
Here is the controller method
$scope.scrollToFaq = function(id) {
$location.path("/faq")
$location.hash(id);
$anchorScroll();
}
Here is how I use it in the home.html
<a ng-click="scrollToFaq('HERE')" href="" class="link">Here</a>
But this is not working properly. If I load the faq page directly and then come back and click the anchor link from the home page, it works. Is it possible to do this with `$anchorScroll
Try to use Angular's $timeout service.
$scope.scrollToFaq = function(id) {
$location.path("/faq");
$timeout(function(){
$location.hash(id);
$anchorScroll();
}, delay);
here delay would be the time you would like to wait until the anchor scroll happens. I have read about 300ms / 400 ms working for people. When I had this issue, I just had to call the $anchorscroll inside the $timeout. So use what's best for you case.
Note: I am on the lookout for a solution without the use of $timeout. Will update when I find one.
Sounds like a history related issue. If the div has already been loaded once it is found immediatly. This solution worked for me in the past. Maybe an idea to wait for the page to load.
$scope.scrollToFaq = function(id) {
$location.path("/faq");
$(window).on("load", function(){
$location.hash(id);
$anchorScroll();
});
};
Had the same problem. But fixed it :)
Idea is to change to the URL, wait a halfsecond and than jump to the anchor.
HTML:
Links
Controller:
angular.module('exampleApp').controller('NavbarCtrl', function ($scope, $location, $timeout, $anchorScroll) {
$scope.goToAnchor = function(path, anchor){
$location.path('/');
$timeout(function() {
$anchorScroll(anchor);
}, 500);
};
});
I have a page in my application which uses a search so i have added the "realoadOnSearch:false" which works perfectly
The problem I have is when navigating to the same state with a different stateParam:
when I navigate to #/category/20/ from any other page it works fine... i then have a link on that page to #/category/3 (the parent category for 20) and the URL updates, however the content does not (no console errors)
app.js (main application)
.state('category', {
url: '/category/:categoryId/',
templateUrl: '/Home/Category',
controller: 'categoryCtrl',
reloadOnSearch: false
})
I have tried adding target="_self" to force page reload and it does not work
I have also tried to watch $stateParams for changes and there is nothing
Clicking the link to #/category/3 from #/category/20 (and vice versa) should navigate to the new page and reload the data, where search should NOT reload the page (latter works but not the former)
The URL is prefered to be a ng-href rather than ng-click as it is managed by the root controller
EDIT:
I did not find a direct solution, however i just disabled the reloadOnSearch and my sorting buttons still work so this works for me for now as a solution.
The problem is that reloadOnSearch doesn't do what you think it does; it's actually more like reloadOnStateParams. Setting it to false prevents you from making state changes where only the stateParams change, which is what you're doing here (going from #/category/3 to #/category/20).
You can see this documented on the UI router issues page: https://github.com/angular-ui/ui-router/issues/1079
There's some workarounds in there but none of them are great. You are probably best off using an ng-click that forces a reload manually, something like this:
$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});
I have an app with angularjs routing, but on some view i want to scroll to some specific div and i use anchorScroll but sometimes (not all times) it refresh all page even i stop event propagation.
Did anyone had this issue?
$scope.redirectTodiv = function(divname,event) {
event.stopPropagation();
event.preventDefault();
$location.hash(divname);
$anchorScroll();
};
Try like this
$scope.redirectTodiv = function(divname,event) {
var id = $location.hash();
$location.hash(divname);
$anchorScroll();
$location.hash(id);
};
The way to ensure navigation with one click is to combine $location.hash() $anchorScroll and setting routeProvider reloadOnSearch property to false i.e.
In your controller code:
$location.hash("editor");
$anchorScroll();
In your route provider:
$routeProvider.when("/masters/voucher", {
templateUrl: "views/card/voucher.html",
reloadOnSearch: false
})
I've two use cases on the same page :
When clicking save, if the response is an error, scroll to the errorDiv that displays the error to the user.
David Kabii's answer did work for me.
However, on the load of the page, in the controller, I want to scroll to a specific area of the page where the user's input is expected. This wouldn't work. I had to use window.setTimeout to workaround this. (there's probably a better way)
window.setTimeout(function(){
$location.hash("anchorForm");
$anchorScroll();
}, 300);
I have a single-page-app with Angular and I'm having an issue with my link fragments:
Search
Clicking here takes me to the right page but retains my scroll position. I would like for it to scroll to the top of the page, so my current work-around is:
Search
And inside the controller:
$scope.goToSearch = function() {
$location.path("/search");
window.scrollTo(0,0);
}
Is there a more straight forward way to do this? I have 4-5 of these links and have to put a function similar to goToSearch in multiple controllers.
If you're using AngularUI Router, you need to set the autoscroll attribute of the ui-view element to false.
<div ui-view="myview" autoscroll="false"></div>
Source: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view
Perhaps this can help http://www.doodlekit.com/blog/entry/55645/auto-scroll-down-links-internal-anchors#toplink
Assuming that the view you are linking to also has a link