Question

这就是我打算做的事情：

初始加价：

<div class="col-md-3 col-sm-3 col-xs-6">
<span class="control-label"><b>Doc. Number:</b></span>
<input name="documentNumber" class="form-control" type="text" ng-model="document.number" smrh-required />
</div>

用我的指示尝试标记：

<div class="col-md-3 col-sm-3 col-xs-6" ng-class="{'has-error': t01Form.documentNumber.$invalid && t01Form.documentNumber.$dirty}">
<span class="control-label"><b>Doc. Number:</b></span>
<input name="documentNumber" class="form-control " type="text" ng-model="document.number" smrh-required="" required="" />
<p ng-show="t01Form.documentNumber.$invalid && t01Form.documentNumber.$dirty" class="help-block">Document Number is required.</p>
</div>

以下是我为尝试此操作而创建的自定义指令：

app.directive('smrhRequired', function ($compile) {
return {
    restrict: 'A',
    link: function (scope, element, attributes, controller) {
        element.attr('ng-required', "");
        //This way it will only show the red outline if the error happens.
        var errorClass = " {'has-error': " + scope.formName + "." + element[0].name + ".$valid && " + scope.formName + "." + element[0].name + ".$dirty }";
        var currentNgClass = element.parent().attr('ng-class');
        if (currentNgClass != null) {
            element.parent().attr('ng-class', currentNgClass + errorClass);
        } else {
            element.parent().attr('ng-class', errorClass);
        }
        //Adding the error message below the input
        var template = '<p ng-show="' + scope.formName + '.' + element[0].name + '.$invalid && ' + scope.formName + '.' + element[0].name + '.$dirty" class="help-block">' + ' is required.' + '</p>';
        element.parent().append(template);
        $compile(element.contents())(scope);
    },
};

}）;

现在上面的函数正确添加了新标记，但新标记都不起作用。即使我动态添加了必需属性，控件仍显示$ valid。

无论ng-show逻辑如何，我添加的新

都会显示出来。

我猜这是因为我在角度已经编译后向DOM添加元素，但我认为$ compile是为了什么？

Answer 1

有一些事情：

ng-class / ng-required是Angular指令。它必须是一个属性到您要使用它的元素。
你需要使用带有$ compile服务的Angular模板在将标记附加到DOM之前描述here

使用AngularJS创建动态验证

1 个答案: