[英]Change controller after form submit in AngularJS
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: 我的问题是:
$scope is not the model, its a reference to a model, glue in between the data & the view. $ scope不是模型,它是对模型的引用,粘在数据和视图之间。 If $scopes in two, or more, controllers need to share data use a singleton object by registering a angular factory.
如果$ scopes分为两个或更多,则控制器需要通过注册角度工厂来使用单例对象共享数据。 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. 这是工厂传递的UI用户在控制器之间单击数据的演示。 http://plnkr.co/edit/P2UudS?p=preview
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;
工厂对象
{uiObject: {data: null}}
使用uiFieldState
及其简单的$scope.selected = uiFieldState.uiObject;
注入控制器$scope.selected = uiFieldState.uiObject;
for connecting the factory to the scope ng-model="selected.data"
. 用于将工厂连接到
ng-model="selected.data"
。
使用angular截取表单,使用$ http发布数据,然后在成功设置window.location到正确的目标位置,该位置应在路由器中定义
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.