Question

我在输入字段中使用此ng-pattern="/^[0-9]{9}$/"，呈现方式如下：

<input 
    type="text" 
    id="company_taxId" 
    ng-model="company.taxId" 
    required="required" 
    class="input ng-scope ng-valid-maxlength ng-valid-minlength ng-dirty ng-valid-required ng-invalid ng-invalid-pattern" 
    style="width:485px;" 
    ng-minlength="9" 
    maxlength="9" 
    ng-maxlength="9" 
    ng-pattern="/^[0-9]{9}$/" 
    placeholder="Ej: 458965879" 
    tooltip="Ej: 458965879" 
    wv-def="Ej: 458965879" 
    tooltip-trigger="focus" 
    tooltip-placement="right" 
    wv-cur="" 
    wv-err="Este valor debería ser un número válido." 
    wv-req="Este campo es requerido" 
    wv-min="Este valor debería tener exactamente 9 caracteres" 
    wv-max="Este valor debería tener exactamente 9 caracteres"
>

如果模式失败，例如，如果我写了字母而不是数字，则应该触发“Estevalordeberíaserunnúmeroválido”这个消息，但是它不起作用，我找不到问题所在。模式错了吗？有什么问题？

这是处理工具提示触发器的指令：

app.directive('validated', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            element.keyup(function(){
                parent = $('.tooltip');
                target = parent.find('.tooltip-inner'); 
                if( element.hasClass('ng-invalid-required') ){
                    target.html(attrs.wvReq);
                    attrs.wvCur = attrs.wvReq;
                    parent.addClass('error');
                }
                else if( element.hasClass('ng-invalid-email') ){
                    target.html(attrs.wvEml);   
                    attrs.wvCur = attrs.wvEml;
                    parent.addClass('error');   
                }
                else if (element.hasClass('ng-invalid-name-exists')) {
                    target.html(attrs.wvNam);
                    attrs.wvCur = attrs.wvNam;
                    parent.addClass('error');
                }
                else if( element.hasClass('ng-invalid-minlength') ){
                    target.html(attrs.wvMin);   
                    attrs.wvCur = attrs.wvMin;
                    parent.addClass('error');   
                }
                else if( element.hasClass('ng-invalid-maxlength') ){
                    target.html(attrs.wvMax);   
                    attrs.wvCur = attrs.wvMax;
                    parent.addClass('error');
                }
                else if( element.hasClass('ng-invalid') ){
                    target.html(attrs.wvErr);
                    attrs.wvCur = attrs.wvErr;
                    parent.addClass('error');   
                }
                else{
                    target.html(attrs.wvDef);
                    attrs.wvCur = attrs.wvDef;
                    parent.removeClass('error');    
                }
            });

            element.focus(function(){
                //attrs.title = attrs.wvCur;

                setTimeout(function(){
                    parent = $('.tooltip');
                    target = parent.find('.tooltip-inner'); 
                    target.html((attrs.wvCur != "" ? attrs.wvCur : attrs.wvDef));
                    if( attrs.wvCur != attrs.wvDef && attrs.wvCur != "" )
                        parent.addClass('error');
                },5);
            });
        }
    };
});

PS：我正在使用Twitter Bootstrap Tooltip

Answer 1

ng-model属性不是可选的（可以看作here）。你确实分配它，但它需要实际存在于范围内。因此，您需要提供具有控制器的作用域以及要在ng-model中引用的有效变量。

这是一个有效的example。您可以看到，如果您移除或以其他方式使分配给ng-model的范围变量无效，它将停止工作。

这将解决问题，但总的来说，我建议你实现你想要做的更接近于角度文档中显示的内容。

修改：以下是您的代码的有效版本：demo

但是，您无法使用attr设置元素属性，就像您尝试的那样。您必须使用element。并且它没有tooltip元素（您可以添加它）。再一次，我强烈建议你看看here，看看一些有角度的教程和例子，并尝试用这种风格重写你的代码。

ng-pattern错误与否不允许触发工具提示

1 个答案: