在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到正確的目標位置，該位置應在路由器中定義