Angular Js - Changing views not working

Question

I'm trying to change view from the controller but it isn't working.

app.js

var app = angular.module('vla', ['ngRoute']);
app.config(function ($routeProvider){
           $routeProvider
            .when('/view1',
                  {
                  controller: 'loginController',
                  templateUrl: 'partials/loginView.html'
                  })
           .when('/view2',
                 {
                 controller: 'noteController',
                 templateUrl: 'partials/videoView.html'
                 })
           .when('/view3',
                 {
                 controller: 'videoListController',
                 templateUrl: 'partials/videoListView.html'
                 })
           .otherwise({ redirectTo: '/view1' });
});

view: videoListView.html

<div class="video" data-ng-click="selectVideo(video)" ng-repeat="video in videos">
        <div ng-repeat="(key, val) in video|orderBy:orderByField:videoName">

            {{key}}: {{val}} </br>

        </div>
</div>

controller.js

app.controller('videoListController', function($scope,getVideoListService){

           $scope.selectVideo = function(video){
           $location.url('/view2');
           }
});

I have tried the following but none seem to work

$location.url('#/view2');
$location.url('/view2');
$location.path('/view2');
$location.path('#/view2');

When inserting a link on a view page such as

<a href="#/view2"</a>click

the page is correctly routed, would appreciate any help on changing views from the controller.

Thanks in advance

Josh · Accepted Answer · 2014-03-13 13:07:21Z

2

UPDATE:

I should have seen this before, but $location is a service you aren't passing in.

//Need to pass in $location
app.controller('videoListController', function($scope, $location, getVideoListService){

   $scope.selectVideo = function(video){
      $location.url('/view2');
   }
});

To help you out in furthering your Angular-foo, I would take a look at John Lindquist's fantastic videos at egghead.io. Most of the Angular videos are free to watch.

Aside from that, the Dependency Injection section from the official Angular Developers Guide is going to be a good read.

Based on what you are describing, my guess is that your function isn't being called at all. Try adding some console output to see if it get's called, and then working to fix your issues.

$scope.selectVideo = function(video){

    console.log('Changing the route...');

    $location.path('/view2');
}

Check the console output for errors by opening up the developer tools.

edited Mar 13, 2014 at 13:07

answered Mar 13, 2014 at 12:56

Josh

45k7 gold badges106 silver badges125 bronze badges

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

4 Comments

FootsieNG Over a year ago

It prints it to console, however it says Error: Can't find variable: $location

Josh Over a year ago

DOH! I should have seen that in your sample! I'll update my answer

Josh Over a year ago

@Cylus27 - Also added some links that should help out a lot. Those videos are an absolute must for any Angular Dev.

FootsieNG Over a year ago

Thanks I'll have a look

Harsh · Accepted Answer · 2014-03-13 12:43:02Z

0

Try the following instead

$window.location = "/view2";

or on click of a button which in turn uses a function:

$scope.randomFunctionAppears= function() {

    $window.location = "/view2";

};

answered Mar 13, 2014 at 12:43

Harsh

1,7051 gold badge10 silver badges16 bronze badges

3 Comments

FootsieNG Over a year ago

I'm very new to this so excuse any stupid comments, but when putting an alert before and after the $window.location = "/view2"; only the initial alert is shown

Harsh Over a year ago

I have used it in every Angular Project of mine and it works. Don't know why not working in yours. This appends your current URL. Here is the documentation on it. docs.angularjs.org/api/ng/service/$window

Harsh Over a year ago

In case of alert because may be your $window.location must be giving some error. Check in console(press F12)

Collectives™ on Stack Overflow

Angular Js - Changing views not working

2 Answers 2

UPDATE:

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

UPDATE:

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related