Question

在我的角度应用程序中，我有一个产品视图/控制器，它有产品的常见问题（SKU，名称，描述等）。我还有一个名为ProductType的下拉字段，我将使用它来加载动态视图/ js / controller，以查找根据该产品类型而变化的问题。当用户保存产品时，我将在名为ProductTypeConfig（以及ProductType）的基本产品模型上拥有一个属性，该属性包含产品类型配置的json表示，并且我希望将所有这些属性传递给服务器控制器以实现持久性。 / p>

有没有人在Angular之前看过这个？关于如何解决这个问题的评论或线索？我不希望提前为每个产品类型控制器等加载所有js，因为随着新产品类型的推出，这可能会被客户端插入。

编辑：

好的，所以我创建了一个插件来演示我想要完成的任务。我认为我的动态作品效果很好。在这一点上，我只需要弄清楚如何在ProductController中的saveProduct（）函数中获取动态数据。单击保存时，我需要以某种方式调用TypeAController或TypeBController上的方法，具体取决于加载哪一个。我以为我可能会创建一个所有控制器都依赖的服务并让它完成工作。这是可能的吗？

插件位于http://plnkr.co/edit/6kQYKU

这是主控制器：

(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>

Answer 1

我最终做了一个简单的工厂来共享控制器之间的对象，如此插件http://plnkr.co/edit/6kQYKU所示。这还演示了如何根据父视图中的字段加载动态视图。

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

      var state = {};

      return {
        state: state,
      };
  };

  app.factory('StateService', stateService);

以角度方式在控制器之间传递数据

编辑：

1 个答案: