angular.js - Angular表单验证-PHP Chinese Network Q&A

本人刚开始学习angular，在表单验证这里碰到了一些问题，我的意思是想在blur的时候再让错误提示显示出来，而在focus时不显示错误信息，可是我按照书上的来打，但是不正确，有谁能帮我分析下，谢谢~

         
    Signup 
  Your name   Your name is required Your name is required to be at least 3 words Your name can't be longer than 20 words 
  focused:{{!signup_form.name.$focused}} $dirty:{{signup_form.name.$dirty}}
 $invalid:{{signup_form.name.$invalid}}
 required:{{signup_form.name.$error.required}}
 minlength:{{signup_form.name.$error.minlength}}
 maxlength:{{signup_form.name.$error.maxlength}}

var app = angular.module('app',[]); app.controller('myCtrl', ['$scope','$timeout', function($scope,$timeout){ }]) app.directive('ngFocus',function(){ // var FOCUS_CLASS = "ng-focused"; return{ restrict : 'A', require : 'ngModel', link : function(scope,ele,attrs,ctrl){ ctrl.$focused = false; ele.bind('focus',function(ev){ // ele.addClass(FOCUS_CLASS); scope.$apply(function(){ ctrl.$focused = true; }); }).bind('blur',function(ev){ // ele.removeClass(FOCUS_CLASS); scope.$apply(function(){ ctrl.$focused = false }) }) } } })

app.directive('validateOnBlur', function () { return { require: 'ngModel', link: function (scope, elem, attrs, ctrl) { var allowTypes = ['text', 'email', 'password']; if (allowTypes.indexOf(attrs.type) === -1) { return; } ctrl.$focused = false; elem.bind('focus', function () { elem.addClass('ng-focused'); scope.$apply(function () { if(!ctrl.$focused){ ctrl.$focused = true; } }); }); elem.bind('blur', function () { elem.removeClass('ng-focused'); scope.$apply(function () { ctrl.$setViewValue(elem.val()); ctrl.$focused = false; }); }); } } })