Question

我的指令在语法上添加了一些属性。其中一个属性是＆＃34;必需＆＃34;。

angular.module('MyApp',['ngMaterial', 'ngMessages'])
    .controller('AppCtrl', function($scope) {})
    .directive("stPattern", ['$compile', stPattern]);

function stPattern($compile) {
    return {
        restrict: 'A',
        link: function ($scope, element, attrs, ngModel) {
            $timeout(function() {
                element
                    .attr("ng-pattern", /^123$/)
                    .attr("required", "required");

                element.removeAttr("st-pattern"); //because compile loop

                $compile(element)($scope);
            }, 2000);
        }
    };
}

在我看来，我创建了一个带有错误消息输入的表单：

<form name="findForm">
    <md-input-container>
        <label>CA ID</label>
        <input type="text" name="findByCaId"
               ng-model="findByCaId"
               ng-focus="$event.target.select()"
               st-pattern="">

        <div ng-messages="findForm.findByCaId.$error">
            <div ng-message="required">Campo obrigatório.</div>
            <div ng-message="pattern">Valor inválido para o campo CA ID.</div>
        </div>
    </md-input-container>
</form>

当我运行应用程序时，验证发生得很好，但消息没有显示！当我用devtools检查浏览器上的渲染代码时，我可以看到消息div创建得很好。

我注意到，当消息出现时，一些CSS属性将应用于消息：

style="opacity: 1; margin-top: 0px;"

我注意到的另一件事是标签上的星号应该有它。

那种行为是对的吗？是个bug吗？

### UPDATE ###

我添加了$ timeout来保持代码与我的问题场景类似。

I create a fiddle to example.

谢谢！

Answer 1

在form的子节点中进行更改后，您必须重新编译form指令，而不是该元素。

而不是$compile(element)($scope);使用$compile(element[0].form)($scope);

以下是工作代码：http://codepen.io/anon/pen/XMMbGj?editors=1010

当添加属性时，角度材料不显示错误消息

1 个答案: