Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Get desired page on clicking a link using ui router in angularjs?

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 118
    Comment on it

    How to go to the desired page on clicking a link when the same link is present in more than one page using ui router in angularjs?

    If you have one link present in more than one page and you want to redirect to the page from where you came to the link,then you can use the following code.

    Firstly, define in the route. This page send tip comes from two pages reply and caller history. You need to send a parameter pagename that will contain the page name from where send tip was reached. And then we can use if condition to redirect it to the desired page.

    .state('home.sendTip', {
                url: '/sendTip/:originatrId/{pagename}',
                templateUrl: 'home-sendTip.html',
                controller: 'sendTipController'
            })
    

    Now in the reply controller and caller history controller define a function which gets called on a button click from send tip page. This will contain the name of the page.

    $scope.sendTip = function() {
    
            window.plugins.nativepagetransitions.slide({
                        "href" : "#/home/sendTip/"+originator-id+"/"+"reply"
                    });
    
        };
    

    similar function for caller history page.

    Now the page from where you reach the page which contains the link,it comes, In this page's controller you have to define the following code:

    $scope.Sendtipdata = function (TipForm,chatInput) {
                        var page-name = $stateParams.pagename;
                        var originator-id = $stateParams.originatrId;
                        var sendTipData = {};
                        sendTipData['responsetype'] = 'json';
                        sendTipData['tip-amount'] = chatInput;
                        sendTipData['proid'] = originator-id;
                        console.log(JSON.stringify(sendTipData))
                        var responsePromise = $http.post( BASE_URL+"sendtip" ,JSON.stringify(sendTipData));
                        responsePromise.success( function( data, status, headers, config ) {
                            console.log( JSON.stringify( data ) );
                            if( data.status == 'error' ) {
                                alert("error");
                            } else {
                                window.plugins.nativepagetransitions.slide({
                                    "href" : "#/home/viewTip/"+originator-id+"/"+page-name
                                });
                            }
                        });
                        responsePromise.error( function ( data, status, headers, config ) {
                            console.log( JSON.stringify( data ) );
                            if( navigator.connection.type == Connection.NONE ) {
                                checkConnection();
                            }
                        } );
        };
    

    In the above code we have send the page-name that will store the value of the page from where we came to the send tip tip page. Now add the following code in the controller of the page which contains the link that comes after the above page.

    $scope.backButton = function() {
            if($stateParams.pagename == 'reply'){
               window.plugins.nativepagetransitions.slide( {
                        "direction": 'left',
                        "href" : "#/home/reply"+$stateParams.originatrId
                    } ); 
           }else if($stateParams.pagename == 'callerhistory'){
                window.plugins.nativepagetransitions.slide({
                    "direction": 'right',
                    "href" : "#/home/callerhistory"+$stateParams.originatrId
                });
           }
        };
    

    In the code I have also used native transition plugin. You can modify the code according to your need. I hope it will help you to implement the logic.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: