javascript - ng-pattern wrong or not doesn't allow tooltip to be triggered -


i'm using ng-pattern="/^[0-9]{9}$/" in input field render follow:

<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" >

if pattern fails, example if wrote letter instead numbers message "este valor debería ser un número válido" should trigger it's not working , can't find problem is. pattern wrong? wrong there?

this directive handle tooltip trigger:

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: i'm using twitter bootstrap tooltip this

the ng-model attribute not optional (as can seen here). assign it, needs exist in scope. need supply scope controller valid variable reference in ng-model.

here working example. can see if remove or otherwise invalidate scope variable assigned ng-model stops working.

this solve issue, in general suggest achieve you're trying closer shown in angular's docs.

edit: here working version of code: demo

however, can't set element attributes using attr trying do. have use element. , doesn't have tooltip element (you can add it). again, strongly advise take here , maybe @ angular tutorials , examples, , try rewrite code in style.


Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more