Angularjs 如何以角度形式包含自定义指令中的输入字段？

我需要创建一个带有如下验证的简单表单-

姓名：


电邮：


{{vm.result}
form={{vm.form1 | json}
角模（'module1'，[]）；
角度。模块（'module1'）。控制器（'ctrl1'，函数（）{
this.save=函数（表单、用户）{
如果（表格$invalid）{
this.result='请更正输入的数据'；
返回；
}
this.result='User'+User.name+'和电子邮件'+User.email+'saved successfully'；
};
});

但我需要动态生成输入字段。所以我做了一个指令，可以转换成任何类型的输入字段-

{{vm.result}
form={{vm.form1 | json}
var app=angular.module（'module1'，[]）；
应用控制器（'ctrl1'，函数（）{
this.save=函数（表单、用户）{
如果（表格$invalid）{
this.result='请更正输入的数据'；
返回；
}  
this.result='User'+User.name+'和电子邮件'+User.email+'saved successfully'；
};
});
应用程序指令（'customInput'，函数（$compile）{
返回{
限制：'E'，
链接：功能（范围、元素、属性）{
var Labelement=角度元素（“”），
name=attributes.name，
type=attributes.type，
ngModelString=attributes.model，
required=属性。required，
inputElement=角度元素（“”）；
attr（'ng-model'，ngModelString）；
inputElement.attr（'name'，name）；
inputElement.attr（'type'，type）；
如果（需要）{
attr（'required'，'required'）；
}
labelement.append（name+'：'）；
labelement.append（inputElement）；
$compile（labelement）（范围）；
元素。替换为（标签元素）；
}
}
});

小提琴是我想做的东西的简化版本。 问题是，即使这些字段经过完美编译和呈现（通过检查HTML可以看到），它们也没有作为父表单控件的一部分包含在内。这可以在两个小提琴中显示的表单控件对象中看到。因此，无法确定表单有效性，并且两个表单在提交无效输入时的行为不同

我需要第二小提琴中的表单控件为其属性提供正确的值，并使子控件及其属性与第一小提琴中的一样。这甚至可以使用自定义指令吗？我需要做什么改变才能让这一切顺利进行

---

注意-该指令将涉及动态创建HTML的复杂操作，因此必须在指令的链接函数中完成。带有多个NGIF的指令模板将不起作用。

为了不丢失来自父表单的绑定，请将其包含在自定义表单指令中

在你的指令中

   <br-input type="text"
          input-value="vm.user.email"
          inputname="name"
          input-required ="true">
   </br-input>

在指令html模板中

当你发出指令时

---

为了不丢失父窗体的绑定，请将其包含在自定义窗体指令中

在你的指令中

   <br-input type="text"
          input-value="vm.user.email"
          inputname="name"
          input-required ="true">
   </br-input>

在指令html模板中

当你发出指令时

    (function () {
    'use strict';

    angular
        .module('myApp')
        .directive('customInput', customInput)





    customInput.$inject = ['$compile'];
    /* @ngInject */
    function customInput ($compile) {


        var directive = {
            templateUrl: 'app/custom-input.html',
            restrict: 'E',
            transclude: true,
            require: "?^form",
            compile: compile,
            controller:CustomInputController,
            controllerAs:'vm',
            scope:{
                inputType:'=',
                inputValue:'='
            }
        };

        return directive;
        function CustomInputController($scope){
            var vm = this;


        }
        function compile(element, attributes){

            return {
                pre: preLink,
                post: postLink
            }
        }
        function preLink (scope,element,attrs, form, transclude){

        }
        function postLink (scope,element,attrs, form, transclude){
            scope.currentForm = form;

            $compile(element.contents())(scope);
        }
    }

})();

<input type="inputType" ng-model="inputValue">

   <br-input type="text"
          input-value="vm.user.email"
          inputname="name"
          input-required ="true">
   </br-input>