Give URL with ID in Angular UI Router

问题:

I have a problem, when I edited data, my url not showing id example : /answer/1 or /answer/2 or /answer/3 etc. Im confused because Im using UI ROUTER I'm a beginner use UI ROUTER angularjs. Can you help me ? What should I do ? Thanks

My routing code :

.state({
    name: 'answer',
    url : '/answer/',
    params : {
                obj : null  
    },
    controller: 'answer-controller',
    templateUrl: 'templates/table-answer.html'
})

ng-click go to table-answer :

<button type="button" class="btn btn-default" ng-click="ListAnswer(data.item)"><i class="fa fa-eye"></i> View Answer</button>

Pass params $scope.ListAnswer into answer-controller.js

$scope.ListAnswer = function(data) {

    $state.go('answer', {obj : data});

};

回答1:

It's quite simple. Only one thing you missed there, otherwise your code is right.

.state({
  name: 'answer',
  url : '/answer/{answerId}',
  params : {
    obj : null  
  },
  controller: 'answer-controller',
  templateUrl: 'templates/table-answer.html'
})

Now there are two ways to go over that state.

//Html

<button type="button" class="btn btn-default" ng-click="ListAnswer(data.answerId)"><i class="fa fa-eye"></i> View Answer</button>

//Controller

$scope.ListAnswer = function(answerId) {
    $state.go('answer', {answerId: answerId});
};

OR

<button type="button" class="btn btn-default" ui-sref="answer({answerId: data.answerId})"><i class="fa fa-eye"></i> View Answer</button>

回答2:

Your state needs altering slightly:

.state({
  name: 'answer',
  url : '/answer/{itemId}',
  params : {
    obj : null  
  },
  controller: 'answer-controller',
  templateUrl: 'templates/table-answer.html'
})

Change your code slightly to pass along the id in the url of links:

<button type="button" class="btn btn-default" 
  ui-sref="answer({itemId: id})">

If you want to access the parameter from your controller however, you'll have to use $stateParams, so in this case, $stateParams.itemId