CODEWITHSUNDEEP
javascriptangularjs
user3821280
user3821280

Reputation: 39

how to redirect user using angular

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!

Upvotes: 0

Views: 126

Answers (2)

Razvan
Razvan

Reputation: 3142

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

Upvotes: 0

Fabio Milheiro
Fabio Milheiro

Reputation: 8474

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

Upvotes: 1

Related Questions