how to redirect user using angular

Question

I'm trying to forward the user when he clicks on the submit button using angular into my web-app this way:

html code

 <tr ng-controller="fCtrl as fiche">
 <td>
 <span ng-hide="fiche.canBeEdited()"></span>
 <span ng-show="fiche.canBeEdited()">
 <input type="checkbox" name="qualif0" ng-model="qualif0" >
 </span>
 </td>
 <td>
 <span ng-hide="fiche.canBeEdited()"></span>
 <span ng-show="fiche.canBeEdited()">
 <input type="checkbox" name="qualif1" ng-model="qualif1" >
 </span>
 </td>
 <td>
 <span ng-hide="fiche.canBeEdited()"></span>
 <span ng-show="fiche.canBeEdited()">
 <input type="checkbox" name="commentaire" ng-model="commentaire" >
 </span>
 </td>
 <td>
 <a href="#" ng-click="fiche.editLine()" title="Modifier">Modifier</a>
 <button type="submit" class="btn btn-primary" ng-show="fiche.canBeEdited()" ng-click="fiche.submitEdit(qualif0, qualif1, commentaire)">Modifier</button>
 </td>
 </tr>

app.js

(function(){
 var app = angular.module('m', [ ]);
 app.controller('fCtrl', function(){
 this.edit = 0;
 this.editLine = function(){
 this.edit = 1;
 };
 this.canBeEdited = function(){
 return this.edit === 1;
 }
 this.submitEdit = function(qualif0, qualif1, commentaire){
 this.edit = 0;
 window.location.replace('./fiche/traiter?qualif0='+qualif0+'&qualif1='+qualif1+'&commentaire='+commentaire);
 }
 });
})();

But, this wouldn't work.

How to fix this, please?

Thanks in advance!

• Vinod Louis: Why do not you use $location.path from angular?
• user3821280: @VinodLouis, Thank you for your advice, but there is another problem here is that I'm receiving blank arguments ng-click="fiche.submitEdit(qualif0, qualif1, commentaire)".
• Razvan: @user3821280 You specify ng-controller="FicheCtrl as fiche" but I can see your controller is named fCtrl. Are you sure submitEdit(...) function is called? Can you provide a fiddle or plunkr, etc...?
• user3821280: @razvan, it has been updated.
• Razvan: @user3821280 Try to use $scope instead of this. Try to see if it works without using the alias fiche. Try to remove the type="submit". And as a side question: Should the redirection involve the server?

Answer 1

Use the location service.

$location service provides getter methods for read-only parts of the URL (absUrl, protocol, host, port) and getter / setter methods for url, path, search, hash:

// get the current path
$location.path();
// change the path
$location.path('/newValue')

• user3821280: I need the arguments passed into the function to redirect the user. But, I'm getting them blank !
• Fabio Milheiro: If the qualif0 are part of your $scope, you don't even need to pas them as parameters. You could just use $scope.qualif inside your event handler. Is your code running? If you put create a plunker.co, it might be easier to determine to root of your problem.
• user3821280: The qualif0 represents the ng-model. I'm trying to get its value and to put it as argument to that function. But, that is not working :/
• Fabio Milheiro: I get that. Is your function actually executing? If it is, trying reading $scope.qualif0 inside that handler and see what the value is using console.log or the debugger.
• user3821280: I've tried using this alert(commentaire);, and I've got an empty value.

Answer 2

If I want to consider redirection in angular I would first listen to the $routeChangeStart event (I think there also is $locationChangeStart) and redirect from there using $location.path(). This way I will prevent angular loading the route before redirection.

This is from some of my old code:

The following code it needs to be on a high level scope (such as the one that includes all the page components. The container.) It is there because it needs to be active on all the views.

// listening to the routeChangeStart event. It is triggered every time the router navigates between views 
$rootScope.$on('$routeChangeStart', function(event, newLocation, oldLocation)
 // check if the route is allowed
 if( newLocation !== '/private' ){
 // if not we stop the navigation and redirect to something else;
 event.preventDefault();
 $location.path('/notAuthorized');
 }
});

• user3821280: Thank you, but there is another problem here is that I'm receiving blank arguments ng-click="fiche.submitEdit(qualif0, qualif1, commentaire)".
• user3821280: would you please write to us the final code into which you put your suggestion, to make it more understandable?
• Razvan: Check stackoverflow and google groups for more info.