如何在另一个组件中使用来自组件的表单

Posted 2023-02-23

【中文标题】如何在另一个组件中使用来自组件的表单

【英文标题】：How to use a form from a component in another component

【发布时间】：2017-03-09 19:26:33

【问题描述】：

我有一个表单控制器和一个表格控制器，在我的表格中我有一个编辑按钮，当我点击这个按钮时，我的弹出窗口需要显示并更新我的表格中的用户。我该怎么做？我如何在我的表格组件中使用他的组件中的表单？

【参考方案1】：

您正在寻找的是一种在控制器（表控制器和表单控制器）之间传递数据的方式。在这种情况下，您需要引入一个服务，将单击项目的值保留在表格列表中——该服务应该同时具有“set”方法和“get”方法。您的表控制器设置该值，您的表单控制器可以简单地读取该值并根据该值填充其字段。

在您的表控制器中的某处：

$scope.selectItem = function (item)
        console.log("Selected Item ", item);
        //we indicate to our ItemsService that this is the current item
        ItemsService.setSelectedItem(item);        
        //switch to item-view form (which will then use the ItemsService to get the selected item)
        $location.path("/form");
      ;

表单控制器中的某处：

var selectedItem = ItemsService.getSelectedItem();
      console.log("Got Item Selected From List :: ", selectedItem, "");
      //this is how we load it on the "details form"
      $scope.formData = selectedItem;

对于大多数应用程序来说，这是一个相当常见的用例——我创建了一个基本的 AngularJS 项目来演示这一点——你可以尝试关注它，看看是否如此。见我的angularjs-list-details-tutorial。

我希望这会有所帮助。

【讨论】：

以及如何在表格组件中打开表单？

你使用 $location 服务并指定路径——或者如果你想要一个模态表单，那么你可以看看这个要点：gist.github.com/rnkoaa/8333940

我已经有一个表单，我想从组件中使用这个表单。

所以表单在模板上 - 你有这个模板的控制器吗？您可以使用相同的方法 - 使用 $scope 引用表单 - 我认为如果您编辑问题并包含代码会更有帮助。告诉我们你做了什么。