发表于: 2016-11-24 23:14:42
8 1612
今日完成
新增学生页面的制作。
表单验证的学习。
明日计划
学习指令详解。
富文本编辑器。
应该会做下一个页面。
问题
今天基本是些小问题。
收获
1、ngMessages
并没有想象的那么好用,还是得结合ngShow或
的脏值和失焦检查。有点奇怪,为什么失焦检查没有封装在框架里,或者,可能是在1.3版本后做进去了——反正我没找着就是了。ngIf
2、把表单验证信息放在属性为
ng-messages
的块级元素里,可能不是个很好的选择。
我本来是这样做的(为了视觉效果用了夸张的CSS):
<!--.validate {
margin-left: 150px;
color: white;
background: red;
padding: 20px;
}
-->
<div ng-messages="createForm.qq.$error"
ng-show="createForm.qq.$dirty && !createForm.qq.$focused"
class="validate">
<p ng-message="required">请输入qq</p>
<p ng-message="minlength">请输入6位以上数字</p>
<p ng-message="maxlength">请输入15位以下数字</p>
</div>
当输入的qq小于6个数字时,提示错误,这是正常的:
但是,在输入正确的时候,就有点不对劲了:
咦?div.validate
怎么还存在?在console里看了一下,果然还存在。起初我以为是ng-inactive
搞得鬼,后来发现和它没有关系。ng-messages
确实会一直存在。所以,我得出的结论就是:
带有ng-message
的元素随自身的验证情况决定是否显示(不显示的时候其实是被注释掉了),但是,带有ng-messages
的元素是一只存在的,因此,要妥善处理它的布局属性(例如p
、m
、bd
)。
PS:看到上图的ng-inactive
类,有点好奇,在官网的API里找到了答案。
If the
ngAnimate
module is active within the application then thengMessages
,ngMessage
andngMessageExp
directives will trigger animations whenever any messages are added and removed from the DOM by thengMessages
directive.Whenever the
ngMessages
directive contains one or more visible messages then the.ng-active
CSS class will be added to the element. The.ng-inactive
CSS class will be applied when there are no messages present. Therefore, CSS transitions and keyframes as well as JavaScript animations can hook into the animations whenever these classes are added/removed.
大概意思是,只要ngMessages
指令导致了DOM的增加或减少,ngAnimate
模块都会被触发。当ngMessages
里包含需要显示的验证信息时,会给自己添加一个ng-active
的类,如果没有,就会添加ng-inactive
。同时,也会触发CSS的过渡效果(我估计意思是,可以额外定制过渡的动画效果)。
总而言之,这两个类是下面的验证信息的总开关。我怎么感觉有点脱裤子放屁的嫌疑呢?本来下面的ng-message
就能决定自己是否显示了。或者是我理解错了吧。 3、虽然只用过这一个框架,但是觉得好好用。举个栗子,用了angularjs后,我再也没操作过dom了,这在用js或者jq的时候简直不敢想象。但是好像国内用得不多样子,连找点中文资料都很难找。推荐去Stack OverFlow搜,那里的angularjs问题蛮多的,虽然都是英文看得眼睛瞎。
评论