AngularJs (第三弹)
表单验证篇
条件:
- 确保表单有一个name属性
<form name="form1" novalidate>
<label>you email</label>
<input name="hh" type="text" ng-model="email" required>
<span ng-show="form1.hh.$error.required">erro</span>
<button ng-disabled="form.$invalid">ssss</button>
</form>
注意:
- $error是验证集合对象
格式:
- formName.$valid
- formName.inputFieldName.$invalid
####required
- 必填项
####ng-minlength & ng-maxlength
- 最大最小长度
####ng-pattern
- 模式匹配
<input type="text" ng-pattern="[a-zA-Z]">
- 邮件格式
####number
####url
####一些有用的css样式
- ng-valid {}
- ng-invalid {}
<form name="form1" novalidate>
<label>you email</label>
<input name="hh" type="text" ng-model="email" required>
<span ng-show="form1.hh.$error.required">erro</span>
<button ng-disabled="form1.$invalid">ssss</button>
</form>
####自定义验证
- 与directive相关,不在这里介绍
- 权威指南P32-P42
表达式
####{ exception }
- 所有表达式在其所属作用域内执行
angular 运行$digest 循环过程中会自动解析表达式 $parse 服务用来进行表达式运算 将 $parse 注入到控制器中,调用来进行手动解析表达式
####$parse
- 作用:
手动解析
表达式
<body ng-app="my">
<div ng-controller="haha">
<input type="text" ng-model="name">
<h3></h3>
</div>
<script type="text/javascript">
angular.module('my', []).controller('haha', function($scope,$parse){
$scope.$watch('name',function(newVal,oldVal,scope){
var m = $parse('name | limitTo:3');
console.log(m(scope));
$scope.www=m(scope);
});
});
</script>
####$interpolate
- 用途:字符串模板插值
如果感觉不能理解,那就简单些说类似于Handlerbars
注意
这里说的是字符串模板,并非html模板
<div ng-controller="haha">
<input type="text" ng-model="name">
</div>
<script type="text/javascript">
angular.module('my', []).controller('haha', function($scope,$interpolate){
var tpl = " know "
var template = $interpolate(tpl);
var obj = {
who:"you",
password:"12345",
}
$scope.mm = template(obj);
});
</script>
####$interpolateProvider
- 用途:配置表达式的开始和结束符号
angular.module("name",[]).config(function($interpolateProvider){
$interpolateProvider.startSymbol('--');
$interpolateProvider.endSymbol('--');
});
模块
优点:
- 保持全局命名空间清洁
- 使应用任意顺序加载代码各个部分
- 在不同应用间复用代码
angular.module(‘app’,[])
作用域
- 理解为视图模型(view model)
生命周期:
- 创建
- 链接
- 更新
- 销毁
指令内部的作用域被称作孤立作用域
控制器
- 不适合执行dom操作,格式化,数据操作
- 视图和$scope之间的桥梁
- 复杂的逻辑应当放入指令和服务中