Change controller after form submit in AngularJS

Question

I currently have a multistep form that lets the user filter which kind of devices he wants back. In order to store his selections, in the current controller I have injected a Factory that can store his selections:

// Factory  
App.factory('DeviceSelection',function() {
   var states=[{selection:{}},{selection:{}},{selection:{}},{selection:{}}];
   return states;
});

So, the form that is rendered to the user looks like this:

<form class="form-horizontal">

  <ul class="nav nav-tabs">
    <li ng-repeat="step in steps" ng-class="{active: $index==getCurrentStepIndex()}">
      <a href="javascript:void(0)" ng-click="goToStep($index)">{{step}}</a>
    </li>
  </ul>
  <div ng-switch on="selection">

    <!-- First Step -->
    <div ng-switch-when="How much do you talk?">
                <input type="radio" name="device_hours" id="device_hours_long" value="Yes" ng-model='states[0].selection.hours'>
                <input type="radio" name="device_hours" id="device_hours_short" value="No", ng-model='states[0].selection.hours'>
    </div>

    <!-- Second Step -->
    <div ng-switch-when="Operating System">
                <input type="checkbox" value="ios" id="selection_os_iOS" ng-model="states[1].selection.ios"> iOS
                <input type="checkbox" value="bb" id="selection_os_bb" ng-model="states[1].selection.bb"> Black Berry 
                <input type="checkbox" value="dunno" id="selection_os_dunno" ng-model="states[1].selection.dunno"> I don't care 
      </div>
    </div>

<div class="pull-right" ng-show="!hasNextStep()"><button style="margin:20px 0;" class="btn btn-success">Show me the devices!</button></div>

My question is:

• Once the user clicks submit, I would like to show his results. I am assuming that I want to use another Controller that will be responsible to look for the data that the User expects (according to the selections he has done in the form). However, I fail to see how would I pass that data that I have in the current $scope to another controller (which will fetch an external API). Where/how should I place the code that will let me pass the control to another Controller and give that controller the selections of the User?

Answer 1

$scope is not the model, its a reference to a model, glue in between the data & the view. If $scopes in two, or more, controllers need to share data use a singleton object by registering a angular factory. That one service/factory can be injected into as many controllers as you like, and then everything can work off that one source of truth.

Here is a demo of a factory passing UI user clicks data between controllers. http://plnkr.co/edit/P2UudS?p=preview

app.factory('uiFieldState', function () {
    return {uiObject: {data: null}}
});

app.controller('NavbarCtrl', ['$scope', 'uiFieldState', '$stateParams', '$state',
    function($scope, uiFieldState, $stateParams, $state) {
        $scope.selected = uiFieldState.uiObject;
    }
]);

app.controller('LeftTabACtrl', ['$scope', 'uiFieldState', '$stateParams', '$state',
    function($scope, uiFieldState, $stateParams, $state) {
        $scope.selected2 = uiFieldState.uiObject;
    }
]);

The factory object {uiObject: {data: null}} is injected into the controller with uiFieldState & then its simply $scope.selected = uiFieldState.uiObject; for connecting the factory to the scope ng-model="selected.data" .

Answer 2

使用angular截取表单，使用$ http发布数据，然后在成功设置window.location到正确的目标位置，该位置应在路由器中定义