javascript - 之后使用 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 来做到这一点，但它们目前不适用于包含我的大部分输入的 mdDialogs，所以我想出了这个解决方案，但它对我不起作用。有什么想法吗？

Answer 1

在你的代码中，当你执行$compile(element)(scope);时，它实际上是在编译element，它不包含你刚刚在前面添加的html线。这是因为 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