CODEWITHSUNDEEP
htmlangularjsangular-ui-router
Utkarsh Goyal
Utkarsh Goyal

Reputation: 81

to get the parameter from the url in angularjs

I have a page add recommendation and same page for the edit recommendation when I click on the add recommendation the recommendation Id is null in the URL, but when I go the page by clicking the recommendation link it will show that respective Id for the recommendation, in URL it is showing but how to get that Id from the URL to use it.

My code is:

.state('Admin.AddRecommendation',{
            url: "/AddRecommendation/:recoId",
            templateUrl: "views/AddRecommendation.html",
            params: {recoId:null},
})

controller.js:

 $scope.addRecommendation = function(){
        var id = $routeParams.recoId;
        console.log(id);

So where I am doing it wrong.

Thanks

Upvotes: 0

Views: 96

Answers (2)

maverick
maverick

Reputation: 148

As you are defining recoId in the url, you don't need params: {recoId:null},

.state('Admin.AddRecommendation',{
            url: "/AddRecommendation/:recoId",
            templateUrl: "views/AddRecommendation.html"
})

You can access the params in the controller by injecting $stateParams

app.controller('MyController', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams) {
    $scope.addRecommendation = function(){
        var id = $stateParams.recoId;
        console.log(id);  
    }
}]);

If you are using components, $stateParams is deprecated in favor of $transition$ However, it is not as straightforward to implement that: https://github.com/angular-ui/ui-router/issues/3110#issuecomment-271101827

Basically, you can use it as

.component('foo', {
    bindings: { $transition$: '<' },
    controller: MyController,
    controllerAs: 'vm'
});

app.controller('MyController', ['$scope', '$state', function($scope, $state) {
    var vm = this;
    $scope.addRecommendation = function(){
        var id = vm.$transition$.params().recoId;
        console.log(id);  
    }
}]);

Upvotes: 1

Akash Agrawal
Akash Agrawal

Reputation: 2299

To get the query params from the URL when using ui-router, you can use

In your controller.js:

$state.params

This will give you all the params in the URL. To get specific param:

$state.params[<your-query-param>]

EDIT: In your question, instead of $routeParams, use $state

Upvotes: 1

Related Questions