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!

@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)"`. — user3821280, Jul 16 '14 at 09:47
@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...? — Razvan, Jul 16 '14 at 11:22
@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? — Razvan, Jul 16 '14 at 14:18

score 1 · Answer 1 · answered Jul 16 '14 at 09:52

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')

answered Jul 16 '14 at 09:52

Fabio Milheiro

8,100
17
57
96

I need the arguments passed into the function to redirect the user. But, I'm getting them blank ! – user3821280 Jul 16 '14 at 09:56
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. – Fabio Milheiro Jul 16 '14 at 10:11
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 :/ – user3821280 Jul 16 '14 at 10:13
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. – Fabio Milheiro Jul 16 '14 at 11:10
I've tried using this `alert(commentaire);`, and I've got an empty value. – user3821280 Jul 16 '14 at 12:23
OK, try `$scope.commentaire` or place a breakpoint in your code and inspect `$scope` object or type `console.log($scope)`. Your `$scope` variable should contain a `commentaire` property. – Fabio Milheiro Jul 16 '14 at 12:25

Razvan · Answer 2 · 2014-07-16T09:59:03.497

0

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');
        }
});

edited Jul 16 '14 at 09:59

answered Jul 16 '14 at 09:49

Razvan

3,017
1
26
35

Thank you, but there is another problem here is that I'm receiving blank arguments `ng-click="fiche.submitEdit(qualif0, qualif1, commentaire)"`. – user3821280 Jul 16 '14 at 09:50
would you please write to us the final code into which you put your suggestion, to make it more understandable? – user3821280 Jul 16 '14 at 09:51
Check [stackoverflow](http://stackoverflow.com/questions/11541695/angular-js-redirecting-to-a-certain-route-based-on-condition) and [google groups](https://groups.google.com/forum/#!topic/angular/dPr9BpIZID0) for more info. – Razvan Jul 16 '14 at 11:29

how to redirect user using angular

2 Answers2