AngularJS change view in ng-view from a controller

Question

I have a JavaScript web app where I used AngularJS to ease things up, but now I bumped into a little problem.

I want to change viewfrom an ng-controller. I use $location.path to do this, but sadly, nothing happens. If I check the $location object, the path will be changed correctly, but the view isn't changing.

I have an ng-view in my Home.html. This is the config I wrote for it:

<html ng-app="app">
   ...
   <body>
      <div id="navigation-menu" ng-controller="NavigatorController">
          <a class="menulink" ng-class="{ active: isActive('/labels')}" href="#page2">Page2</a>
          <a class="menulink" ng-class="{ active: isActive('/labels')}" href="#page3">Page3</a>
      </div>

      <div ng-view></div>
   </body>
</html>

This is the config I made for the $routeProvider which works flawlessly when used in the menusystem

myApp.config(function ($routeProvider) {
$routeProvider
    .when('/', {
        templateUrl: 'Page1.html',
        controller: 'Page1Controller'
    })
    .when('/page2', {
        templateUrl: 'Page2.html',
        controller: 'Page2Controller'
    })
    .when('/page3', {
        templateUrl: 'Page3.html',
        controller: 'Page3Controller'
    });
});

Upon opening the app I want to show the Page1.html in the ng-view, so that's sorted with the '/' url thing, I guess.

The problem is, that from every other controller, I want to be able to get back to the Page1.html.

I tried making an event in every other controller, like this:

$scope.NavigateBack = function() {
    $location.path('/');
}

It's not working, sadly. I don't get any error messages though... I tried it with different addresses in the path, like "/page2", but nothing worked.

What am I doing wrong, that the view isn't changing and the page isn't navigating?

should work fine. SHould how you call `NavigateBack` in view. Did you forget to use `()` or have typo in spelling it? — charlietfl, Oct 02 '15 at 13:49

score 1 · Accepted Answer · answered Oct 02 '15 at 13:53

1

I recommend use

$window.location = "#/"

but don't forgot to inject $window to your controller

answered Oct 02 '15 at 13:53

Saeid Doroudi

935
1
9
25

score 0 · Answer 2 · answered Oct 02 '15 at 14:17

Define behaviour in the Page2Controller, for example:

$scope.goBack = function(){
        $location.path("#/");
    }

And add some button inside of Page2.html:

<button ng-click="goBack()">Return</button>

You might also need to change your navigation links href attribute to #/page2 and #/page3

AngularJS change view in ng-view from a controller

2 Answers2