在之后使用 jQuery 添加包含 ng-if 的元素

Question

我正在尝试使用指令向某些输入添加一些验证。我使用以下代码添加验证警报，但 ng-if 似乎没有注册并且消息不断显示。

if (addMessages) {
    angular.element(element).after('<div><span ng-if="form.' + scope.fieldName + '.$error.maxlength">Please keep it under ' + property.length + ' characters.</span></div>' +
        '<div><span ng-if="form.' + scope.fieldName + '.$error.required">This field is required</span></div>')
    element.removeAttr("my-directive");
    $compile(element)(scope);
}

我最初尝试使用 ngMessages 执行此操作，但他们目前没有在包含我大部分输入的 mdDialog 上工作，所以我想出了这个解决方案，但它对我不起作用。 有什么想法吗？

Answer 1

在代码中执行$compile(element)(scope);时，它实际上是在编译不包含您刚刚在上一行中添加的 html 的element。这是因为element.after在element之后添加了html。因此，您必须获取对插入的动态元素的引用，然后对其调用$compile，它应该可以正常工作。

if (addMessages) {
    var $htmlToInsert = $('<div><span ng-if="form.' + scope.fieldName + '.$error.maxlength">Please keep it under ' + property.length + ' characters.</span></div>' +
        '<div><span ng-if="form.' + scope.fieldName + '.$error.required">This field is required</span></div>');
    angular.element(element).after($htmlToInsert)
    element.removeAttr("my-directive");
    $compile($htmlToInsert)(scope);
}

演示 http://plnkr.co/edit/Vjt1PTGfbLa6zA0iRYSz?p=preview