发表于: 2017-06-23 23:37:36
1 791
今天完成的事情:看了一堆乱七八糟的内容包括(angular自定义指令的写法,表单验证,xss攻击,然后就发现其实把最大长度写到html里面的网站挺少的)。。然而并没有学到什么知识。改了js任务2中的一个padding的问题,然后看着舒服多了,上传了任务7.
明天计划的事情:看angularjs即学即用中指令的内容,一定要学会自定义指令啊。
遇到的问题:感觉angularjs还没有入门。
收获:angularjs自定义指令
指令的作用:实现语义化标签
使用Angular来定义一个hello指令(本质上说就是自己来把<hello>这种玩意儿替换成浏览器能识别的那些标准HTML标签)
如果自定义的标签内部出现了子标签,应该如何去处理呢?很显然,transclude就是用来处理这种情况的。
transclude并不会替换掉标签,replace才会
自定义指令中使用AngularJS扩展HTML的功能。自定义指令使用的“指令”的功能定义。自定义指令只是替换了它被激活的元素。引导过程中AngularJS应用程序找到了匹配的元素,并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素。 AngularJS提供支持,以下列元素的类型来创建自定义指令。
Element directives - 指令遇到时激活一个匹配的元素。
Attribute - - 指令遇到时激活一个匹配的属性。
CSS - - 指令遇到时激活匹配CSS样式。
Comment - - 指令遇到时激活匹配的注释。
抄了一个自定义指令,并不是很懂,自己照着写的,效果可以在成果链接的新增页面看到。
// 自定义指令练习
myApp.controller("addCtrl",["$scope",function($scope){
$scope.format="M/d/yy h:mm:ss a";
}])
myApp.directive("myClock",['$interval','$filter','$log',function($interval,$filter,$log){
return{
scope:{
myFormat:"="
},
link:function(scope,element,attrs){
//真正的函数部分
function updateTime(){
element.text($filter('date')(new Date(),scope.myFormat));
}
scope.$watch('myFormat',function(newValue){
$log.info('value changed to'+newValue);
updateTime();
})
$interval(function(){
updateTime();
},1000);
//到这里就结束了
}
}
}])
评论