Getting error while click on a link using angular.js ui-router

Question

I am getting the following error while to click on a link using angular.js.

Error:

Error: Could not resolve '.profile?p_i=3' from state 'dashboard.profile'
    at Object.t.transitionTo (angularuirouter.js:7)
    at Object.t.go (angularuirouter.js:7)
    at angularuirouter.js:7
    at angularjs.js:146
    at e (angularjs.js:43)
    at angularjs.js:45

I am using angular UI-router for nested views. My code is below:

profile.html:

<div class="col-lg-12">
<div class="portlet portlet-blue" style="margin-bottom:12px;">
 <div class="portlet-body">
<div class="table-responsive dashboard-demo-table">
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<colgroup>
<col class="col-md-1 col-sm-1">
<col class="col-md-2 col-sm-2">
 <col class="col-md-2 col-sm-2">
<col class="col-md-2 col-sm-2">
<col class="col-md-2 col-sm-2">
<col class="col-md-2 col-sm-2">
<col class="col-md-1 col-sm-1">
</colgroup>
 <thead>
<tr>
<th>Sl. No</th>
<th>College Name</th>
<th>Address</th>
<th>Contact No</th>
<th>Edit</th>
</tr>
</thead>

<tbody id="detailsstockid">
<tr ng-repeat="profile in profileData">
<td>{{$index+1}}</td>
<td>{{profile.colg_name}}</td>
<td>{{profile.address}}</td>
<td>{{profile.cont_no}}</td>
<td>
<a ui-sref='.profile?p_i={{profile.profile_id}}'>
<input type='button' class='btn btn-xs btn-green' value='Edit'>  
</a>
</td>
</tr>   
</tbody>
</table>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>

This file is binding inside the dashboard.html page which is given below.

dashboard.html:

 <a ui-sref=".profile" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">College profile<span class="caret"></span></a>
<div class="row" style="padding-top:90px;"  ui-view>

        </div>

loginRoute.js:

var Admin=angular.module('Channabasavashwara',['ui.router']);
Admin.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
     .state('/', {
            url: '/',
            templateUrl: 'dashboardview/login.html',
            controller: 'loginController'
        })
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'dashboardview/dashboard.html',
            controller: 'dashboardController'
        })
        .state('dashboard.profile', {
        url: '/profile',
        templateUrl: 'dashboardview/profile.html',
        controller: 'profileController'
    })          
})

profileController.js:

var dashboard=angular.module('Channabasavashwara');
dashboard.controller('profileController',function($scope,$http,$location){
     var id=gup( "p_i" );
     $http({
        method: 'GET',
        url: "php/profile/readProfileData.php",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function successCallback(response){
        $scope.profileData=response.data;
    },function errorCallback(response) {

    });
     if(id != ''){
        $scope.buttonName="Update";
        var userdata={'userid':id};
        $http({
            method: 'POST',
            url: "php/profile/editProfileData.php",
            data: userdata,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function successCallback(response){
            console.log('edited data',response);
            $scope.colgname=response.data[0].colg_name;
            $scope.address=response.data[0].address;
            $scope.contno=response.data[0].cont_no;
        },function errorCallback(response) {
        });
    }else{
        $scope.buttonName="Submit";
    }
    $scope.addProfileData=function(){
        if($('#addProfileData')[0].defaultValue=='Submit'){
        if($scope.colgname==null){
            alert('course name field could not blank');
        }else if($scope.address==null){
            alert('short name field could not blank');
        }else if($scope.contno==null){
            alert('semester field could not blank');
        }else{
        var userdata={'colg_name':$scope.colgname,'address':$scope.address,'cont_no':$scope.contno};
        //console.log('userdata',userdata);
        $http({
            method: 'POST',
            url: "php/profile/addProfileData.php",
            data: userdata,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function successCallback(response){
            console.log('profile',response);
            alert(response.data['msg']);
            $scope.colgname=null;
            $scope.address=null;
            $scope.contno=null;
            $scope.profileData.unshift(response.data);
        },function errorCallback(response) {
            alert(response.data['msg']);
        })
        }
        }
        if($('#addProfileData')[0].defaultValue=='Update'){
            var updatedata={'colg_name':$scope.colgname,'address':$scope.address,'cont_no':$scope.contno,'profile_id':id};
            console.log('userupdate',userdata);
            $http({
            method: 'POST',
            url: "php/profile/updateProfileData.php",
            data: updateData,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function successCallback(response){
            alert(response.data);
            $location.path('profile');
        },function errorCallback(response) {
            alert(response.data);
        });
        }
    }
})
function gup( name ) {
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );
    if( results == null )
        return "";
    else
        return results[1];
}

Here when I am clicking on edit button in profile.html page this error is coming. I need to move to same profile page again after click.

Answer 1

There is a working example

Easily said:

relative path could be used only in a proper context...

So, inside of views of the state 'dashboard':

.state('dashboard', {
    url: '/dashboard',
    templateUrl: 'dashboardview/dashboard.html',

Namily in this case inside of the view 'dashboardview/dashboard.html' - we can use realtive path:

<a ui-sref='.profile?p_i={{profile.profile_id}}'>

because it will be provided with proper starting part:

current state ('dashboard') + relative path '.profile' === 'dashboard.profile'

In any other state, we will get different result - of the relative path. Mostly targeting NON EXISTING states...

EXTEND: to make it running (and later play with relative state names) I would suggest to use absolute state name:

// instead of this
<a ui-sref='.profile?p_i={{profile.profile_id}}'>
// I'd use this
<a ui-sref='dashboard.profile'>

And to be able to consume the parameter, we should extend state defintion with url param:

.state('dashboard.profile', {
        url: '/profile?profileId',
        // or
        url: '/profile/:profileId',
        templateUrl: 'dashboardview/profile.html',
        controller: 'profileController'

And then we can pass param like this

<a ui-sref='dashboard.profile({profileId:profile.profile_id})'>

There is a working example