保留模型数据的角度嵌套范围和嵌套视图

时间:2015-10-08 12:34:34

标签: javascript angularjs model scope nested

我目前有一个带有相当复杂向导的应用程序来创建数据记录。该向导由3个步骤组成,每个步骤与嵌套视图和控制器相关联。只有数据记录本身在所有三个范围之间共享,并且每个控制器都为主记录提供额外的数据。 但它们也有特定于范围的数据,这些数据将用于呈现仅与该嵌套范围相关的其他字段。

我希望能够在向导步骤之间来回切换,但目前看起来嵌入的作用域在我移动到另一个嵌套视图时会被丢弃。我查看了开发人员指南中的范围生命周期:https://docs.angularjs.org/guide/scope#scope-life-cycle 但我并没有真正告诉我范围生命周期如何应用于嵌套范围以及如何防止这些范围被丢弃。当然,我可以将嵌套作用域的所有数据移动到父作用域中,但对我而言,这只是一种解决方法,因为实际上数据只与各个作用域相关。

我会尝试举一个简短的例子:

angular.module('app').controller('ParentCtrl', function ($scope) {
  ...
  $scope.dataRecord = {};
}
angular.module('app').controller('Child1Ctrl', function ($scope) {
  ...
  $scope.dataRecord.test = 'a';
  $scope.childScope1SpecificData = '123';
}
angular.module('app').controller('Child2Ctrl', function ($scope) {
  ...
  $scope.dataRecord.test2 = 'b';
  $scope.childScope2SpecificData = '456';
}

当我现在在两个儿童望远镜之间来回切换时,dataRecord将被正确调整,但是当我切换到Child2Ctrl并返回时,对childScope1SpecificData(通过模板的输入字段)的更改将被丢弃。

有没有办法可以保留这些切换范围的数据,或者它是否意味着被丢弃而我只是错误地使用它?

谢谢

编辑: 好的,我调查了工厂方法。也许是为了使它更具可塑性:属于每个子范围的附加数据是一个文件上传器及其关联的上传队列。仅在稍后的验证步骤中,这些图片实际上成为数据记录的一部分,但在此之前我不希望上传的图像在切换视图时丢失。 所以我可以做的是将整个fileupload逻辑外部化到一个工厂,该工厂返回与ID相关联的文件上载程序。每当子作用域请求相同的id时,工厂将返回相同的fileuploader。不同的ID会返回不同的上传者或新的上传者。这几乎可以解决问题,但也意味着数据永远不会被丢弃,除非我真的关闭浏览器,因为工厂现在完全独立于任何范围。由于我只想在该向导的上下文中保留数据,因此我希望在离开向导时立即丢弃数据。 因此,在研究了这些其他方法之后,似乎我必须采用最初的想法:我必须将上传者附加到父范围。所以当切换到其他子视图时它们将继续存在,但是一旦我离开向导它们也将被丢弃。

我希望这是正确的总结

1 个答案:

答案 0 :(得分:1)

如果您使用'控制器作为'语法,您可以使用此变体。

angular.module('app').controller('ParentCtrl', function ($scope) {
  ...
  $scope.dataRecord = {};
}
angular.module('app').controller('Child1Ctrl', function ($scope) {
  ...
  $scope.ParentCtrl.dataRecord.test = 'a';
  $scope.ParentCtrl.childScope1SpecificData = '123';
}
angular.module('app').controller('Child2Ctrl', function ($scope) {
  ...
  $scope.ParentCtrl.dataRecord.test2 = 'b';
  $scope.ParentCtrl.childScope2SpecificData = '456';
}

因此,您正在更改父作用域中的ParentCtrl对象,而不是每个实例。 对不起,如果这是不可理解的

相关问题