AngularJS:在同一个控制器中从一个视图传递数据到另一个视图。
AngularJS:在同一个控制器中从一个视图传递数据到另一个视图。
摘要:
我的Angular应用程序中有一个视图(first
)中的表单,在成功响应的ajax调用后,用户将被重定向到视图(second
)。应用程序只有一个控制器(用于所有视图
)。在这里,用户可以在视图(first
)中输入表单字段,这些字段应该显示在视图(second
)上。再次,视图(second
)中有一个表单,用户可以在其中输入表单字段,这些字段应该显示在视图(third
)上。
由于所有视图(first,second,third
)共享相同的控制器函数,我创建了一个service
来在一个视图中set
和get
数据,并在整个应用程序中使用此服务来发送数据从一个视图到另一个共享相同控制器的视图。
问题陈述:
由于我在整个应用程序中从同一个服务获取数据,所以我无法将每个表单数据存储在单独的变量中。
图表:
由于Angular中的服务是单例的,所以当您转到另一个页面时,它们不会被重新创建。因此,当我从控制器调用dataService.setData()
方法时,它会删除服务中先前存储的数据,并用新数据更新,这对我来说是一个问题。我希望将所有视图数据分别存储,而不是互相覆盖。
在同一个控制器中,从一个视图传递数据到另一个视图的问题是由于以下原因产生的。解决方法是在控制器中创建一些用于每个不同视图的键,并在调用setData方法时接收要存储的数据和键。然后更新getData方法,以便您可以选择要获取的数据。现在,您的dataService应该像这样:
angular.module('app').service('dataService', function() { var s = {}; function setData(data, key){ s[key] = data; } function getData(key){ return s[key]; } });
这样,您就可以根据键从dataService中获取存储的数据。
在AngularJS中,有时需要在同一个控制器中的不同视图之间传递数据。下面是一个解决这个问题的方法:
首先,我们可以创建一个factory(工厂)来存储数据。这个factory可以使用一个存储值来实现,代码如下:
.factory('storeValue', function() { var valueStored= {}; return { getValue: function(viewId) { return valueStored[viewId]; }, setValue: function(newValue,viewId) { valueStored[viewId] = newValue }, deleteOrder: function(viewId) { delete valueStored[viewId]; } }; })
接下来,在控制器中使用这个factory。假设这是一个视图(View)的控制器,并且依赖于上述的factory,代码如下:
$scope.setData = function(){ storeValue.setValue('value for First View', $state.current.name); } $scope.getData = function(){ storeValue.getValue($state.current.name); // This will return the String 'value for First View' }
通过调用`storeValue.setValue()`来设置一个值和一个标识符(Identifier)给第一个视图。`$state`对象代表当前的视图,它将作为对应视图的标识符。然后,你可以在其他视图中做同样的操作,而不会丢失数据。
这样,我们就可以在同一个控制器中的不同视图之间传递数据了。
另外,有一个问题提到了“添加一个标识符给每个视图,这样它就可以像哈希表一样工作。”这里的意思是在factory中使用视图的标识符作为键,将数据存储在一个哈希表中。这样,我们可以通过视图的标识符来获取对应的数据。
希望以上内容对你有所帮助。
使用ui-router,可以使用params参数将数据从一个状态传递到另一个状态。
所以,假设有三个状态(加一个抽象的父状态):
$stateProvider.state('parent', { abstract: true, param: { propertyOne: null, propertyTwo: null } }) .state('parent.first', { controller: YourController, params: { propertyOne: null, propertyTwo: null } }) ...在需要使用params的其他状态上重复上述步骤
然后,当submit()被触发时,可以调用$state.go并传递变量:
$state.go("seconds", { propertyOne: 'one', propertyTwo: 'two' }, { inherit:false });
感谢答案,但是我在一个对象中有很多属性,所以这种方法不能按预期工作。