先上一段，页面的html代码：
<!--html--><!-- 添加页面登陆功能，登陆后才可抽奖 --><div class="login" ng-if="showLogin"><div class="login-content"><div class="login-title"><p class="welcomeLogin">欢迎登录</p></div><div class="login-body"><div class="body-wrapper"><div class="login-phone"><span>手机号:</span><input type="text" name="phone" value="" ng-model="$parent.mobile" ng-blur="mobileCheck()"></div><hr/><div class="login-verification"><span>验证码:</span><input type="text" name="verification" value=""><a ng-click="sendCode()" ng-bind="paracont" ng-disabled="paraevent"></a></div></div><p ng-if="mobileErr">请输入格式正确的手机号码</p><button class="login-bnt">登录</button><div class="begin" ng-click="closeLogin()"><span>开始抽奖 >></span></div></div><div class="login-footer"></div></div></div>
踩坑实记：ng-if会创建一个子scope作用域，会继承父级作用域的属性。对于值类型的变量来说，如果修改了ng-if中的变量的值，父scope中的值是不会修改的。这里我们用ng-model绑定input输入框的内容。必须加上$parent才可以绑定到父级scope的作用域上。
验证手机号是否合法
var app = angular.module("app",[])app.controller("luckCtrl", function($scope, $http, $interval){$scope.mobileErr = false; //设置默认的验证状态为正确$scope.mobileCheck = function(){var mobile = $scope.mobile + '';//强制转换为字符串if(mobile.length == 0 || mobile.length != 11){$scope.mobileErr = true;return false;//将登录状态设置为false}//长度验证var checkRegex = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,2,3,5-9])|19[0-9])\d{8}$/;if(!checkRegex.test(mobile)){//正则表达式合法性验证$scope.mobileErr = true;return false}$scope.mobileErr = false;}}
2.发送验证码
var app = angular.module("app",[])app.controller("luckCtrl", function($scope, $http, $interval){$scope.paracont = "发送验证";//发送验证时的默认文本$scope.paraevent = true;//发送验证可否点击var second = null;var timePromise = undefined;$scope.sendCode = function(){var mobile = $scope.mobileif(second === null){second = 60;//初始化发送间隔为60s$scope.mobiletest = "";timePromise = $interval(function(){if(second<=0){$interval.cancel(timePromise)//超时则取消间隔定时器timePromise = undefined;second = null;$scope.paracont = "重新获取";//重置状态$scope.paraevent = true//可点击重新获取}else{$scope.paracont = second + "s"second--;//计时中国}},1000,100)}else{return false;} }}
