Change AngularJS url/route from html - javascript code

Question

Say I have a button that's within the ng-app scope, but outside the ng-controller/ng-view scope.

<html ng-app="myApp">
<!-- ... -->
<body>
    <button id="myButton">Click me!</button>
    <div ng-view> <!-- angular-view --> </div>
</body>
</html>

And I want to change the URL/Route when I click the button.

var button = document.getElementById('myButton');

button.addEventListener('click', function() {
    //code that changes path.
});

How do I do that? If I try window.location.href = '/'; the whole page gets reloaded, not just the view. $location isn't visible from html javascript, so that's not an option neitehr.

If anyone knows a way I can change the path/route/url from javascript, I'd be more than happy to accept any valid answer, or a redirect to some helpful documentary post, or a rederect to another SO question, because I'm trying to find an answer to this for a while and I've got nothing...

I'll note that I tried making a global scope function, but that didn't work, neither.

angular.module('myApp', [])
    .config( ... )
    .run(function($rootScope, $location) {
        $rootScope.setUrl = function(url) {
            $location.path(url);
        };
    })
    .controller(
        .....

and called with setUrl('/');, $root.setUrl('/'); and $rootScope.setUrl('/');, but still nothing ('undefined').

note: the button script is just an example, the real purpose why I'm asking this is a little bit larger, so I'm trying to simplify.

@jonasnas unfortunately, doesn't. it returns it as 'undefined function'. — Toza
– Toza, Commented Dec 19, 2015 at 13:35
are you calling it like this: ng-click="setUrl('/somePath')" ? — jonasnas
– jonasnas, Commented Dec 19, 2015 at 13:37
did, but still didn't work properly. while it doesn't crash, nor report bugs, it still doesn't actually change the location path. — Toza
– Toza, Commented Dec 19, 2015 at 13:49

dfsq · Accepted Answer · 2015-12-19 13:14:20Z

2

If your purpose is to change route from outside of the Angular app, then you need to change location hash part:

window.location.hash = 'new-route';

Inside Angular controller use $location.path method.

answered Dec 19, 2015 at 13:14

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Toza Over a year ago

only problem with this is, they don't want the hash to be implemented in the URL, so I have set up $locationProvider.html5Mode({ enabled: true, requireBase: false });

Collectives™ on Stack Overflow

Change AngularJS url/route from html - javascript code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related