Javascript 使用指令的表单验证无效

我对angularJs是新手。。。。我试图编写一个指令，将输入框包装在一个表单标记中，后面是一个包含验证的“div”。验证不起作用。 plunker链接：

我使用以下代码包装输入标记

var getHtml = function(){
                return '<div data-ng-show="myform.myfield.$error.required &&myform.myfield.$dirty ">field is required</div>';
              }

    element.attr('name','myfield');
    element.wrap('<form name="myform"></form>');
    element.after(getHtml());

var getHtml=function（）{
返回“字段为必填项”；
}
attr（'name'，'myfield'）；
元素。包裹（“”）；
元素之后（getHtml（））；

这是因为您没有编译

表单

元素。 插入：

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

你必须：

$compile(element.parent())(scope);

但这本身会导致编译的无限循环，因此在编译之前必须删除

cs options

属性。您还必须在预编译而不是后编译（即链接阶段）中执行此操作

此处的工作示例：