Question

我使用的是Angular JS 1.5.6，我只想使用component而不是指令。

我在我的应用程序中使用表单有超过5个视图。表单的样式在所有视图中完全相同，它只是表单内容的变化。我已经制作了组件（输入，按钮等），我想为表单创建一个组件，它就像一个容器组件，我可以在其中放置不同的组件。在视图A中，表单将包含1个按钮和1个输入，在视图B中，表单将包含2个按钮和2个输入等...但我不知道是否可以执行此操作以及如何执行此操作它。我有plnkered这个。我想为表单创建一个组件。

<!DOCTYPE html>
<html ng-app="MyApp">

<head>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
  <script src="script.js"></script>
  <script src="myInput.js"></script>
  <script src="myButton.js"></script>
</head>

<body ng-controller="MyCtrl">
  <div class="container">
    <h2>My form</h2>
    <form role="form">
      <my-input label="Firstname"></my-input>
      <my-input label="Lastname"></my-input>
      <my-button label="Submit"></my-button>
    </form>
  </div>
</body>

</html>

Answer 1

您需要在表单容器中解决两个基本问题：

表单的动态模板
处理峰会应该在您的组件之外运行。

我通过

解决了两个问题

通过attrs属性阅读模板
将处理函数作为绑定属性传递

表单组件的代码：

  angular.module('MyApp').component('myForm', {
    templateUrl: function($element, $attrs) {
      return $attrs.template; // read template file from component attribute
    },
    controller: MyFormController,
    bindings: {
      label: '@',
      summitHandler: '&' // call to function outside of component via this property
    }
  });

在MyFormController 中，我们需要通过调用通过绑定属性传递的summitHandler函数来处理峰值事件：

function MyFormController($scope, $element, $attrs) {
      var ctrl = this;
      ctrl.summitForm = function(data) {
        // call handler with data summited
        var handler = ctrl.summitHandler();
        handler(data);
      }
}

这一切都是我们的表单容器组件。

现在您可以添加my-form ：

<my-form label="Personal Info" template="myForm.html" summit-handler="ctrl.myFormHandler"></my-form>

属性 ctrl.myFormHandler 将是myCtl中的函数处理事件：

ctrl.myFormHandler = function(data){
    console.log('receive test summit:' + data);
    ctrl.dataReceived = data;
}

See it run here in Plunk.

在年龄字段中输入，您可以看到它将传递到表单之外。根据需要使用更多功能扩展它。

Answer 2

看看这个项目：

http://kelp404.github.io/angular-form-builder/

如果你想自己实现这个，你需要动态创建一个模板并在它注入DOM之前编译它。这个项目很有用：

https://github.com/incuna/angular-bind-html-compile

它的指令但它会为你注入和编译你的表单元素（组件或指令）：

<div bind-html-compile="formElements.input1"></div>

使用Angular JS组件

2 个答案: