0

I am building a multi step signup form, in that I am passing the data from 1st state to 2nd state using input boxes, but data is not fetching from the first state

var publisherdata = {
  email: $scope.publishersignup.email,
  name: $scope.publishersignup.name,
  password: $scope.publishersignup.password
};
$state.go('profile', publisherdata);

in html view I am using this publisherdata variable to fetch the details like:

<input type="text" ng-model="email" ng-bind="publisherdata.email" name="email" disabled />

But value is nothing. Please help, how to pass data?

T J
  • 42,762
  • 13
  • 83
  • 138
Swamy Reddy
  • 53
  • 8

2 Answers2

1

Seems that ng-model="email" points to $scope.email. If you want to fetch this data you can use that variable, or you can use publisherdata.email. I don't think you need ng-bind, ng-model should suffice.

this code $state.go('profile', publisherdata); changes the view from one to another. The variables in the controller will not be used. I recommend making a service or a factory that you can use for sending information from one controller to another.

Stian Standahl
  • 2,506
  • 4
  • 33
  • 43
  • Using a service is the way to go. State parameters are not there to "pass data". – Ron Dadon May 24 '16 at 05:43
  • @RonDadon [the community seems to disagree 71-0](http://stackoverflow.com/a/29792020/2333214) – T J May 24 '16 at 05:48
  • why is it better to send data from one controller to another using state params? (asking cause of interest) – Stian Standahl May 24 '16 at 05:53
  • 1
    @TJ I don't see where the disagreeing part is. Passing a data object via state params is possible, will work, but simply not good practice. That will cause you states to be tightly coupled to each other, instead on depending of a single point of dependency that can be injected to them. – Ron Dadon May 24 '16 at 05:53
  • @RonDadon I don't see how it makes any coupling (state params are optional) , or why it's not a good practice. It's a *feature* developed out community interest to be used by developers using ui router. – T J May 24 '16 at 05:56
  • When should you use state params and when should you use service? – Stian Standahl May 24 '16 at 05:57
  • @StianStandahl `$stateParams` **is a service.** I hope that solves your confusion. – T J May 24 '16 at 06:01
  • yes, I get that. But it's a different technique for sending data between controllers and I want to know when it's best practice to use one or the other. – Stian Standahl May 24 '16 at 06:02
  • @TJ exactly, state params are optional, which can lead to a lot of problems (forgeting to pass them, misspelling them...). Where is the coupling? The new state will depend on data passed from another state, so, it will be depended on that state, that is the definition of coupling :) – Ron Dadon May 24 '16 at 06:02
  • 1
    @StianStandahl using state params is useful to pass view related information. To share data between state/controllers, delegate the data handing to a service that will be responsible for that data – Ron Dadon May 24 '16 at 06:05
  • @RonDadon If we use a *custom* service, then the new state will depend on data available in *custom* service. The coupling is still there. One can forget to set the data in *custom* service as well. There is no different between injecting a built in service and depending on the data passed via it vs injecting a custom service and depending on the data set in it. I find your argument pointless, sorry. The link I shared has 71 votes vs 0 negative votes which mean the community disagrees with your argument... – T J May 24 '16 at 06:06
  • Here is a blog post by John Papa explaining why you use services. https://johnpapa.net/sharing-data-in-an-angular-controller-or-an-angular-service/ and as he says, you might agree or disagree. We'll still be friends :) – Stian Standahl May 24 '16 at 06:09
  • 1
    @TJ it's just a matter of practices. I believe that separating the data to a different service will help in the future, and that makes it a good practice. Lets say that you will need another object to be passed, instead of changing all the states, you will have to change only the service. By the way, a 71 up votes does'nt make it right, there are a lot of questions in SO that the accepted answer is not the best one. – Ron Dadon May 24 '16 at 06:12
1

For the bindings to work, you need to define your data as state parameters, inject $stateParams in your destination controller and add the parameters into $scope.

For example,

State configuration:

$stateProvider.state('profile', {
   url: '/profile',
   params: {
     publisherdata: null
   }
   templateUrl: '',
   controller: 'destinationCtrl'
});

Passing data:

$state.go('profile', {
 publisherdata: {
  email: $scope.publishersignup.email,
  name: $scope.publishersignup.name,
  password: $scope.publishersignup.password
 }
});

Destination controller:

.controller('destinationCtrl', function($scope,$stateParams){
  $scope.publisherdata = $stateParams.publisherdata;
});
T J
  • 42,762
  • 13
  • 83
  • 138