使用 angular.js ui-router 单击 link 时出错

Question

我在使用 angular.js 单击 link 时出现以下错误。

错误：

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

我正在使用 angular UI-router 进行嵌套视图。我的代码如下：

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>

此文件绑定在下面给出的 dashboard.html 页面中。

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];
}

这里，当我点击 profile.html 页面中的编辑按钮时，出现了这个错误。单击后我需要再次移动到相同的个人资料页面。

Answer 1

有a working example

轻松地说：

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

所以，里面的状态'dashboard':

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

在这种情况下，主要是在视图内部 'dashboardview/dashboard.html' - 我们可以使用实际路径：

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

因为它将提供适当的起始部分:

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

在任何其他状态，我们将得到不同的结果 - 相对路径。主要针对 NON EXISTING 个州...

EXTEND：使其成为运行 （稍后使用相对状态名称） 我建议使用绝对状态名称：

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

为了能够使用参数，我们应该使用 url 参数扩展状态定义：

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

然后我们可以像这样传递参数

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

有a working example

使用 angular.js ui-router 单击 link 时出错

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

javascript

state

nested

angularjs

angular-ui-router