爱前端2016年9月12日案例笔记

复 自定义指 Re 模板作用 @修饰 =修饰 下午复 作业 nameFormnameInputnameform$dirtyTrueFalse$pristine表单是否输入过True表示没有输入过False表示输入过$validTrueFalse$invalidTrueFalse必填项检测ng-required，required1都是作用用在输入或者未输入阶段（初始时候，$validfalse）1required是浏览器指令，因此浏览器会根据该指令做一些处理，ng-require是一个指令，所以浏览2ng-required必须传递一个值，（布尔值），require可以传可以不传长度检测maxlength，minlength，ng-maxlength，ng-minlength12检测是在输入阶段，没输入阶段他们是测的，因此（$valid值是true）1maxlength，minlengthh5属性，因此浏览器会识别并做相应的处理（maxlength当超过这个长Ng-maxlength，ng-minlength是一个指令，所以浏览器不是别它，因此兼容性会更好正则检测pattern，ng-pattern12检测都是输入阶段，没有输入情况下，他们是不会检测的，因此初始化时候$valid1patternh52pattern他的值是没有//正则（正则的内容部分Ng-pattern是一个完整的正则包括//,sssNg-disabled表示表单是否可以操作TrueFalseNg-readyonlytrueFalseNg-checkedTrueFalseNg-change为表单元素绑定一个changeNg-submit表单提交当表单元素form内部的类型为submit元素触发点击时候，会触发该指令form元素上Run是应用程序的执行（启动）方法，当该方法执行之后，应用程序启动起来Ng-controller控制器指令，作用是用来创建作用域的（除了跟作用域有特殊名字$rootScope,其他的任何作用域都$parent$$childScope$$nextSibling$$prevSibling前一个兄弟作用域Ng-herf动态为a创建href属性Ng-src动态为img创建src属Ng-class如果成员是一个变量，这个变量可以插入多个类（通过空格隔开），vue中不允许angular尽量一个变量对应一个类Ng- 对象的属性是一个cssNg-ifFlaseNg-showNg-switch多分支条件模板判断指令，要有多个指令配合使用（div上Onng-switchNg-switch-defaultNg-switch-whenNg-repeatng-repeat=”itemin$index0$first$last$middle$even$index$odd$indexNg-includeangular很重要的一个部分，angulardomLing-repeatli建Filterapp上调用的，directiveappfilter一样，使用自定是在页面中添加到domjsdirective方法作用域是RestrictECMA，这四类书写顺序是任意的，可以组合使用<my-title></title>C：class类自定义指令<divclass=”my-directivemy-title<divmy-TemTemte表示自定义指令模板ReRece：表示是否替换该元素（dom中的元素是否删除 <divid="app"ng-2divtiitle34<divmy-5<divclass="my-6<!--directive:my-title-- 8app.directive('myTitle',function()returnrestrict: te'<h1>912日 ce:}19$elementjqueryjqlite对象对象的属性名称表示$attrs对象上的属性名称对象属性值表示指令元素上真实的属性名称scope时候，会使用父作用域（父控制器作用域）scope属性来约束这个作用域true，此时自定义指令的作用域是一个独立的，不会收到父作用域中的影响，当然也不会影响父值是此时自定义指令会创建一个独立的作用域，但是在自定义指令模板中是使用不了的，使用时候 <divid="app"ng-23<divng-4<inputtype="text"ng-56showMsgmsgp7<pid="demo"my-title="234"o"show-controller:function{$scope.msg爱创课堂$scope.ickt=scope://scope://}89891113.directive('showMsg',function()returnrestrict: //定义控制器,在控制器中我们需要作用域，因此可以将作用域传递进来,我们还需要获取自定false（scope时候）自定义指令作用域与父作用域是同一个作用域，他们的变量true，自定义指令作用域是独立的，因此父作用域中修改数据不会影响子作用域，子作用域修改变量值是一个{}true效果是一样的，自定义指令用其自身数据渲染页面这三种情况在angular叫作用域， <divid="app"ng-223<divng-4<inputtype="text"ng-567<pid="demo"my-title="234"o"show-8.directive('showMsg',function()returnrestrict: te:'<h2>{{ickt}}|controller:function($scope,$element,$attrs)通过$scope$scope.msg爱创课堂$scope.ickt=scope://scope://}26@（这个属性是一个普通自定义属性，其值就是一个字符串，因此，想<divid="app"ng-<divng-<inputtype="text"ng-showMsgmsgp<pmsg-data="{{msg}}"show-.directive('showMsg',function()returnrestrict: te:'<h2>{{ickt}}|scope:msg: //定义控制器,在控制器中我们需要作用域，因此可以将作用域传递进来,我们还需要获取自定controller:function($scope,$element,$attrs)msgData通过$scope$scope.msg爱创课堂$scope.ickt= //scope://}32=scope属性中通过=符号将自定义指令中的变量与父作用域中的变量建立双向绑定 <divid="app"ng-23<divng-4<inputtype="text"ng-5678showMsgmsgp<pmsg-data="msg"show- 11.directive('showMsg',function()returnrestrict: te:'<h2>{{ickt}}|scope:msg: //定义控制器,在控制器中我们需要作用域，因此可以将作用域传递进来,我们还需要获取自定controller:function($scope,$element,$attrs)msgData通过$scope$scope.msg爱创课堂$scope.ickt=}//scope:// 32windowRestrictECMAmy-directiveE自定义元素<my-directive></my-C<divclass=”my-Mdirectivemy-directiveA<divmy-Temte定义自定义指令单模Rece是否替False$scope$elementjqueryjquery实例化对象$attrs$attr表示驼峰式命名属性到指令元素上属性名称的映射Scope作用域的，有没有，如果要看scope的值False此时指令作用域与父作用域同享同一个，因此修改指令作用域会影响父作用域，修改父作用域会影响指令作用域此时指令作用域与父作用域是独立，但是在指令元素内的插值变量使用的是父作用域中的数据False此时指令作用域与父作用域共享同一个，因此修改指令作用域会影响父作用域，修改父作用域会影true的区别是，我们在这种情况下可以通ScopeAttrsapp.directive('repeatNum',app.directive('repeatNum',function()return4restrict:5link6789@scope@jqlitejqlite@attrslink:function(scope,jqlite,attrs)numvarnum=////for(vari=0;i<num;i++)//////vardom=//////vardom=for(vari=0;i<num;i++)varcloneDom=}//}}36jqlite对象attrs属性对象linkcompilecompile方法不论页面中link方法执行之前执行 .directive('icktShow',function($compile)22345returnrestrict:6compile:function()7//console.log(this,8//console.log(arguments,9returnfunction(scope,jqlite,attrs)scope.$watch(attrs.icktShow,function(value)if(value)// y',}else y',}}}}25ng-transclude指令transcludetrue .directive('myTime',function($compile)23return4// te:5 teUrl:6transclude:7controller:function($scope)89vardate=new=date.getHours()+':'+date.getMinutes()+':'}}13 .directive('myDeal',function()23return4restrict:5require:6link:function(scope,jqlite,attrs,ctrl)7span8varspan9sp