CODEWITHSUNDEEP
javascriptjqueryangularjsajax
Rahul Dey
Rahul Dey

Reputation: 107

$state is params is empty for my angular js project

I am new in angular.So i am using $state for changing the view state.My state code is 

angular.module('myApp.controller', []).controller('firstController', ['$scope', '$state', function($scope, $state) {
$scope.loadView2 = function() {
    $state.go('secondView', {
        firstname: $scope.firstname,
        lastname: $scope.lastname
    });
    };
}]);

angular.module('myApp.controller').controller('secondController', 
    function($scope, $stateParams, $state) {
       console.log($state.params); // empty object
       $scope.firstname = $stateParams.firstname; // empty
       $scope.lastname = $stateParams.lastname;  //empty
});

And my route is following

angular.module('myApp', ['myApp.controller', 'ui.router']).config(['$stateProvider', function($stateProvider) {
$stateProvider.state('firstView', {
    url: '/fisrt-view',
    templateUrl: './partials/view1.html',
    controller: 'firstController'
});
$stateProvider.state('secondView', {
    url: '/second-view',
    templateUrl: './partials/view2.html',
    controller: 'secondController'
});

But i always get blank object in view2.

Upvotes: 0

Views: 114

Answers (3)

Tundzhel Mert
Tundzhel Mert

Reputation: 108

You have to define parameters as follows:

$stateProvider.state('secondView', {
    url: '/second-view?firstname&lastname',
    templateUrl: './partials/view2.html',
    controller: 'secondController'
});

or:

$stateProvider.state('secondView', {
    url: '/:firstname/:lastname/second-view',
    templateUrl: './partials/view2.html',
    controller: 'secondController'
});

or:

$stateProvider.state('secondView', {
    url: '/second-view',
    templateUrl: './partials/view2.html',
    controller: 'secondController',
    params: {
        firstname: null,
        lastname: null,
    }
});

Here's the related section from ui-router repo.

Upvotes: 0

Paolo
Paolo

Reputation: 734

to pass data between views you have to define params in your second view, like this:

$stateProvider.state('secondView', {
  url: '/second-view',
  templateUrl: './partials/view2.html',
  controller: 'secondController',
  params: {
    mynewparam: null
  }
});

then when you switch view:

$state.go('secondView', {mynewparam: 'newParam'});

and you retrive the data inside the view controller like this:

$scope.mynewparam = $stateParams.mynewparam;

notice also that you can chain states without repeating $stateProvider, example here: 

$stateProvider
  .state('firstView', {
    url: '/fisrt-view',
    templateUrl: './partials/view1.html',
    controller: 'firstController'
  })
  .state('secondView', {
    url: '/second-view',
    templateUrl: './partials/view2.html',
    controller: 'secondController',
    params: {
      mynewparam: null
    }
  });

Upvotes: 2

tanmay
tanmay

Reputation: 7911

Your secondView state should be:

$stateProvider.state('secondView', {
    url: '/second-view',
    params: {
        firstname: null,
        lastname: null
    },
    templateUrl: './partials/view2.html',
    controller: 'secondController'
});

That should fix it.

Upvotes: 0

Related Questions