Javascript 以角速度在控制器之间传递数据

在我的angular应用程序中，我有一个产品视图/控制器，其中包含产品的常见问题（SKU、名称、描述等）。我还有一个名为ProductType的下拉字段，我将使用该字段加载动态视图/js/controller，以解决因产品类型而异的问题。当用户保存产品时，我将在基本产品模型上拥有一个名为ProductTypeConfig（以及ProductType）的属性，该属性包含产品类型配置的json表示，我希望将所有这些传递给服务器控制器以进行持久化

以前有没有人在英国见过这种情况？关于如何进行的评论或线索？我不想提前加载每个产品类型控制器等的所有js，因为随着新产品类型的推出，这可能会被客户端插入

编辑： 好的，我创建了一个plunk来演示我要完成的任务。我觉得这部动画片很好用。此时，我只需要弄清楚如何在ProductController的saveProduct（）函数中获取动态数据。单击save时，我需要根据加载的方法调用TypeAController或TypeBController上的方法。我在想，我可能可以创建一个所有控制器都依赖的服务，并让它完成工作。这是可能的吗

plunk就在这里

这是主控制器：

(function() {
  var app = angular.module('ProductApp', ['ngRoute']);

  app.config(function($httpProvider, $routeProvider) {
    $routeProvider.
    when('/', {
      templateUrl: 'product.html',
      controller: 'ProductController'
    }).
    otherwise({
      redirectTo: '/'
    });

  });

  var ProductController = function($scope, $log, $routeParams, $location) {
    var saveProduct = function() {
      // how to get data from either TypeAController or TypeBController here when saved from ProductController
      $log.log('Product saved')
      $location.path('/');
    };

    $scope.saveProduct = saveProduct;

    // values
    $scope.ProductId = 1001;
    $scope.Name = 'Product 1001';
    $scope.Type = 'typea';

  };
  app.controller("ProductController", ProductController);


}());

<div ng-controller='TypeAController'>
<h1>Type A Settings</h1>
<fieldset>
  <div class="dnnFormItem">
    <label>Width:</label>
    <br />
    <input type="text" name="width" ng-model="Width" />
    <br />
    <label>Height:</label>
    <br />
    <input type="text" name="height" ng-model="Height" />
    <br />
  </div>
</fieldset>
</div>
<script>
  console.log('TypeA is loaded');
  var TypeAController = function($scope, $log) {

  };
  angular.module('ProductApp').controller("TypeAController", TypeAController);

</script>

这是其控制器的动态视图之一：

(function() {
  var app = angular.module('ProductApp', ['ngRoute']);

  app.config(function($httpProvider, $routeProvider) {
    $routeProvider.
    when('/', {
      templateUrl: 'product.html',
      controller: 'ProductController'
    }).
    otherwise({
      redirectTo: '/'
    });

  });

  var ProductController = function($scope, $log, $routeParams, $location) {
    var saveProduct = function() {
      // how to get data from either TypeAController or TypeBController here when saved from ProductController
      $log.log('Product saved')
      $location.path('/');
    };

    $scope.saveProduct = saveProduct;

    // values
    $scope.ProductId = 1001;
    $scope.Name = 'Product 1001';
    $scope.Type = 'typea';

  };
  app.controller("ProductController", ProductController);


}());

<div ng-controller='TypeAController'>
<h1>Type A Settings</h1>
<fieldset>
  <div class="dnnFormItem">
    <label>Width:</label>
    <br />
    <input type="text" name="width" ng-model="Width" />
    <br />
    <label>Height:</label>
    <br />
    <input type="text" name="height" ng-model="Height" />
    <br />
  </div>
</fieldset>
</div>
<script>
  console.log('TypeA is loaded');
  var TypeAController = function($scope, $log) {

  };
  angular.module('ProductApp').controller("TypeAController", TypeAController);

</script>

类型A设置
宽度：




高度：




log（'TypeA已加载'）；
var TypeAController=函数（$scope，$log）{
};
角度。模块（'ProductApp'）。控制器（“类型控制器”，类型控制器）；

最后，我做了一个简单的工厂，在控制器之间共享一个对象，如本文所示。这还演示了基于父视图中的字段加载动态视图

  var stateService = function() {
      'use strict';

      var state = {};

      return {
        state: state,
      };
  };

  app.factory('StateService', stateService);