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>

我的问题是：

一旦用户点击提交，我想展示他的结果。我假设我想使用另一个Controller来负责查找用户期望的数据（根据他在表单中所做的选择）。但是，我没有看到如何将当前$ scope中的数据传递给另一个控制器（将获取外部API）。在哪里/如何放置代码，让我将控件传递给另一个控制器并为该控制器提供用户选择？

Answer 1

$ scope不是模型，它是对模型的引用，介于数据和介质之间。风景。如果两个或更多控制器中的$ scope需要共享数据，请通过注册角度工厂来使用单个对象。可以将一个服务/工厂注入到任意数量的控制器中，然后一切都可以解决这个问题。

以下是工厂在控制器之间传递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＆amp;注入控制器。然后简单$scope.selected = uiFieldState.uiObject;用于将工厂连接到范围ng-model="selected.data"。

Answer 2

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

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

2 个答案: