发表于: 2019-12-14 22:04:38
1 1183
今天的收获:
使用$watchCollection还可以检测对象或数组何时发生了变化,以便确定对象或数组中的
条目是何时添加、移除或者移动的。 $watchConllection的行为与$digest循环中标准的$watch
的行为一样,我们甚至可以把它当作标准的$watch。
$watchCollectiion()函数接受2个参数。
q obj(字符串/函数)
这个对象就是一个要监控的对象。如果传入一个字符串,它将被当作Angular表达式求值。
如果传入的是一个函数,将在当前作用域中被调用,并且会返回要监控的值。
q listener(函数)
这个回调函数会在集合发生变化时触发。类似于$watch函数,这个函数会被来自$watch的
新集合触发调用,而原来的集合(先前集合的副本)以及所在的作用域也随之生效。
$watchConllection()函数也返回一个注销函数。调用这个注销函数时,也会取消集合上的
$watch
$evalAsync()方法是一种在当前作用域上调度表达式在未来某个时刻运行的方式。 $digest
循环运行的第二个操作是执行$$asyncQueue。可以使用$evalAsync()方法访问这个工作队列。
$digest循环期间,贯穿脏值检查生命周期的每个循环之间的队列都是空的,这意味着使用
$evalAsync来调用任何函数都会发生两件事情。
q 函数会在这个方法被调用的某个时刻之后执行。
q 表达式求值之后至少会执行一次$digest循环。
$evalAsync()方法接受一个唯一参数:
q expression(字符串/函数)
这个表达式便是我们想要在当前作用域上执行的东西。如果传入一个字符串, Angular将会
在当前作用域上使用$eval求值该表达式。
如果传入的是一个函数, Angular将会使用传递给这个函数的scope对象执行函数求值
所有输入字段都可以进行基本的验证,比如最大、最小长度等。这些功能是由新的HTML5
表单属性提供的。
如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记。
下面看一下可以在input元素上使用的所有验证选项。
1. 必填项
验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:
<input type="text" required />
2. 最小长度
验证表单输入的文本长度是否大于某个最小值,在输入字段上使用AngularJS指令ng-minleng=
"{number}":
<input type="text" ng-minlength="5" />
3. 最大长度
验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用AngularJS指令
ng-maxlength="{number}":
<input type="text" ng-maxlength="20" />
4. 模式匹配
使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式:
<input type="text" ng-pattern="[a-zA-Z]" />
5. 电子邮件
验证输入内容是否是电子邮件,只要像下面这样将input的类型设置为email即可:
<input type="email" name="email" ng-model="user.email" />
6. 数字
验证输入内容是否是数字,将input的类型设置为number:
<input type="number" name="age" ng-model="user.age" />
7. URL
验证输入内容是否是URL,将input的类型设置为 url:
<input type="url" name="homepage" ng-model="user.facebook_url" />
8. 自定义验证
在AngularJS中自定义指令是非常容易的。鉴于目前还没有介绍到指令的相关内容,第10章
再深入研究如何创建自定义验证。目前先来看一下如何通过向后端服务器发送请求,并通过响应
的结果来将输入字段设置为合法或不合法,以确保输入字段中的内容是唯一的。
9. 在表单中控制变量
表单的属性可以在其所属的$scope对象中访问到,而我们又可以访问$scope对象,因此
JavaScript可以间接地访问DOM中的表单属性。借助这些属性,我们可以对表单做出实时(和
AngularJS中其他东西一样)响应。
一些基本的表单验证直接就可以通过h5,自带的一些东西就可以自己验证了,不需要我们再去写麻烦的正则了,这样省事很多
使用$watchCollection还可以检测对象或数组何时发生了变化,以便确定对象或数组中的
条目是何时添加、移除或者移动的。 $watchConllection的行为与$digest循环中标准的$watch
的行为一样,我们甚至可以把它当作标准的$watch。
$watchCollectiion()函数接受2个参数。
q obj(字符串/函数)
这个对象就是一个要监控的对象。如果传入一个字符串,它将被当作Angular表达式求值。
如果传入的是一个函数,将在当前作用域中被调用,并且会返回要监控的值。
q listener(函数)
这个回调函数会在集合发生变化时触发。类似于$watch函数,这个函数会被来自$watch的
新集合触发调用,而原来的集合(先前集合的副本)以及所在的作用域也随之生效。
$watchConllection()函数也返回一个注销函数。调用这个注销函数时,也会取消集合上的
$watch
$evalAsync()方法是一种在当前作用域上调度表达式在未来某个时刻运行的方式。 $digest
循环运行的第二个操作是执行$$asyncQueue。可以使用$evalAsync()方法访问这个工作队列。
$digest循环期间,贯穿脏值检查生命周期的每个循环之间的队列都是空的,这意味着使用
$evalAsync来调用任何函数都会发生两件事情。
q 函数会在这个方法被调用的某个时刻之后执行。
q 表达式求值之后至少会执行一次$digest循环。
$evalAsync()方法接受一个唯一参数:
q expression(字符串/函数)
这个表达式便是我们想要在当前作用域上执行的东西。如果传入一个字符串, Angular将会
在当前作用域上使用$eval求值该表达式。
如果传入的是一个函数, Angular将会使用传递给这个函数的scope对象执行函数求值
评论