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

添加包含ng-if的元素后使用jquery

1 个答案: