Search code examples
javascripthtmlangularjsng-viewoffice-app

AngularJS change view in ng-view from a controller

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?

Solution

  • I recommend use 

    $window.location = "#/"

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