在AngularJS中提交表单后更改控制器

Question

我目前有一个多步骤表单，可让用户筛选他想要退回的设备。 为了存储他的选择，我在当前控制器中注入了一个可以存储他的选择的工厂：

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

因此，呈现给用户的表单如下所示：

<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>

我的问题是：

• 用户单击提交后，我想显示他的结果。 我假设我想使用另一个控制器来负责查找用户期望的数据（根据他在表单中所做的选择）。 但是，我看不到如何将当前$ scope中的数据传递给另一个控制器（它将获取外部API）。 我应该在哪里/如何放置将控制权传递给另一个控制器并赋予该控制器用户选择权的代码？

Answer 1

$ scope不是模型，它是对模型的引用，粘在数据和视图之间。 如果$ scopes分为两个或更多，则控制器需要通过注册角度工厂来使用单例对象共享数据。 可以根据需要将一个服务/工厂注入到尽可能多的控制器中，然后一切都可以在这一事实来源中发挥作用。

这是工厂传递的UI用户在控制器之间单击数据的演示。 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;
    }
]);

工厂对象{uiObject: {data: null}}使用uiFieldState及其简单的$scope.selected = uiFieldState.uiObject;注入控制器$scope.selected = uiFieldState.uiObject; 用于将工厂连接到ng-model="selected.data" 。

Answer 2

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