Redirect from Angular JS not working for URL with hash '#'

Question

Background of how I am initializing my AngularJS app is here : SCRIPT5022: 10 $digest() iterations reached. Aborting! and redirecting to index.html

Summery Problem

When I do a window.location = $scope.myReturnUrl and if the return URL contains a "#", instead of reloading the page, AngularJS captures the url change and it goes to .otherwise part of rout provider setting, and Angular App is loaded again. But, I am expecting it to redirect to specified URL.

Brief of how I am doing this:

I am loading my AngularJS app inside a Bootstrap Modal, this is how I initialize

var markup = '<div id="ng-app" ng-app="myapp" xmlns:ng="http://angularjs.org"><div ng-controller="MyAppAppCtrl"><div ng-view></div></div></div>';
jQuery('#works-modal').html(markup);
angular.bootstrap(jQuery('#ng-app'), ['myapp']);   
jQuery('#works-modal').modal('show');

in my app.js, html5mode is set to false for all modules :

$locationProvider.html5Mode(false)

So, when my app is initialized, the url look something like :

http://my-site.uk/user/dashboard.html#/mywork/find/id/9780273651

Now, there is a cancel button on Modal dialog, click on which I am trapping through ng-click, and when clicked, it simply do a redirection something like

window.location = $rootScope.returnToUrl;

now, in my case, return url contains id of the link that was clicked, so that browser can scroll to particular section, the return url is :

http://my-site.uk/user/dashboard.html#my-work1

my rout provider config

$routeProvider.
        when('/mywork/find/:id', {
          templateUrl: '/mywork/partials/find/find.html',
          controller: WorkCtrl
        }).
        when('/mywork/find/review/submit/:id', {
          templateUrl: '/mywork/partials/review.html',
          controller: ReviewCtrl
        }).
      otherwise({
        redirectTo: '/mywork/find/id/'+id
      });

Problem

Now, when I am trying to redirect to : http://my-site.uk/user/dashboard.html#my-work1 instead of reloading page and scrolling to designated #ID, AngularJS is capturing the URL change and reloading the app instead. this happens because, AngularJS captures the url change and it goes to .otherwise part of rout provider setting, and Angular App is loaded again. But, I am expecting it to redirect to specified URL.

I am use html5mode(true) due to historic reason (mentioned in this thread : SCRIPT5022: 10 $digest() iterations reached. Aborting! and redirecting to index.html)

I don't want to remove the # from my return url because it will break the workflow. Any suggestion how to overcome this?

Thanks,

Ravish

score 0 · Answer 1 · answered Nov 08 '13 at 15:56

0

So it sounds like you want http://my-site.uk/user/dashboard.html#my-work1 to redirect you to dashboard.html and scroll to the element with id="my-work1".

You might want to take a look at the $anchorScroll(http://docs.angularjs.org/api/ng.$anchorScroll) service. I'm not sure how it works exactly as I've never needed to use it, but I know it solves problems such as yours.

answered Nov 08 '13 at 15:56

NicolasMoise

7,261
10
44
65

there is once problem though, what if I am trying to a page that is not an "AngularJS" App? I mean, I do want to scroll to that particular section, but, that whole page is not AngularJS. I am using `window.location = MY_REDIRECT_URL` to redirect to some page. the redirect url happens to contain a **#**, but, there should be a way to 'tell' AngularJS, that do not listen to /^these_urls[-]*/i, ? – Ravish Nov 09 '13 at 21:17
I've resolved my problem by using a work around, I'll answer my question with details. thanks for your answer – Ravish Dec 09 '13 at 12:46

score 0 · Answer 2 · answered Nov 08 '13 at 16:00

0

in your URL (http://my-site.uk/user/dashboard.html#my-work1) try pass 'my-work1'as a parameter in routeProvider like http://my-site.uk/user/dashboard.html/my-work1.

example:

when('/my/route/:param', {
    templateUrl: '/mywork/partials/param.html',
    controller: WorkCtrl
})

in your controller, get this parameter with $routeParams.

var myParam = $routeParams.param
$location.hash(myParam)//set anchor
$anchorScroll()//do scroll

I hope this solve your problem

answered Nov 08 '13 at 16:00

ops.rio

552
1
6
12

@ops-rio there is once problem though, what if I am trying to a page that is not an "AngularJS" App? I mean, I do want to scroll to that particular section, but, that whole page is not AngularJS. I am using `window.location = MY_REDIRECT_URL` to redirect to some page. the redirect url happens to contain a **#**, but, there should be a way to 'tell' AngularJS, that do not listen to /^these_urls[-]*/i, ? – Ravish Nov 09 '13 at 21:16
@RavishTiwari could you create a jsfiddle? – ops.rio Nov 13 '13 at 16:29
let me see if I can create one – Ravish Nov 14 '13 at 12:36
@ops-rio I've resolved my problem by using a work around, I'll answer my question with details. thanks for your answer – Ravish Dec 09 '13 at 12:46

Redirect from Angular JS not working for URL with hash '#'

2 Answers2