愛前端2016年9月12日案例筆記

復(fù) 自定義指 Re 模板作用 @修飾 =修飾 下午復(fù) 作業(yè) nameFormnameInputnameform$dirtyTrueFalse$pristine表單是否輸入過True表示沒有輸入過False表示輸入過$validTrueFalse$invalidTrueFalse必填項(xiàng)檢測ng-required，required1都是作用用在輸入或者未輸入階段（初始時候，$validfalse）1required是瀏覽器指令，因此瀏覽器會根據(jù)該指令做一些處理，ng-require是一個指令，所以瀏覽2ng-required必須傳遞一個值，（布爾值），require可以傳可以不傳長度檢測maxlength，minlength，ng-maxlength，ng-minlength12檢測是在輸入階段，沒輸入階段他們是測的，因此（$valid值是true）1maxlength，minlengthh5屬性，因此瀏覽器會識別并做相應(yīng)的處理（maxlength當(dāng)超過這個長Ng-maxlength，ng-minlength是一個指令，所以瀏覽器不是別它，因此兼容性會更好正則檢測pattern，ng-pattern12檢測都是輸入階段，沒有輸入情況下，他們是不會檢測的，因此初始化時候$valid1patternh52pattern他的值是沒有//正則（正則的內(nèi)容部分Ng-pattern是一個完整的正則包括//,sssNg-disabled表示表單是否可以操作TrueFalseNg-readyonlytrueFalseNg-checkedTrueFalseNg-change為表單元素綁定一個changeNg-submit表單提交當(dāng)表單元素form內(nèi)部的類型為submit元素觸發(fā)點(diǎn)擊時候，會觸發(fā)該指令form元素上Run是應(yīng)用程序的執(zhí)行（啟動）方法，當(dāng)該方法執(zhí)行之后，應(yīng)用程序啟動起來Ng-controller控制器指令，作用是用來創(chuàng)建作用域的（除了跟作用域有特殊名字$rootScope,其他的任何作用域都$parent$$childScope$$nextSibling$$prevSibling前一個兄弟作用域Ng-herf動態(tài)為a創(chuàng)建href屬性Ng-src動態(tài)為img創(chuàng)建src屬Ng-class如果成員是一個變量，這個變量可以插入多個類（通過空格隔開），vue中不允許angular盡量一個變量對應(yīng)一個類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上調(diào)用的，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對象上的屬性名稱對象屬性值表示指令元素上真實(shí)的屬性名稱scope時候，會使用父作用域（父控制器作用域）scope屬性來約束這個作用域true，此時自定義指令的作用域是一個獨(dú)立的，不會收到父作用域中的影響，當(dāng)然也不會影響父值是此時自定義指令會創(chuàng)建一個獨(dú)立的作用域，但是在自定義指令模板中是使用不了的，使用時候 <divid="app"ng-23<divng-4<inputtype="text"ng-56showMsgmsgp7<pid="demo"my-title="234"o"show-controller:function{$scope.msg愛創(chuàng)課堂$scope.ickt=scope://scope://}89891113.directive('showMsg',function()returnrestrict: //定義控制器,在控制器中我們需要作用域，因此可以將作用域傳遞進(jìn)來,我們還需要獲取自定false（scope時候）自定義指令作用域與父作用域是同一個作用域，他們的變量true，自定義指令作用域是獨(dú)立的，因此父作用域中修改數(shù)據(jù)不會影響子作用域，子作用域修改變量值是一個{}true效果是一樣的，自定義指令用其自身數(shù)據(jù)渲染頁面這三種情況在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愛創(chuàng)課堂$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: //定義控制器,在控制器中我們需要作用域，因此可以將作用域傳遞進(jìn)來,我們還需要獲取自定controller:function($scope,$element,$attrs)msgData通過$scope$scope.msg愛創(chuàng)課堂$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: //定義控制器,在控制器中我們需要作用域，因此可以將作用域傳遞進(jìn)來,我們還需要獲取自定controller:function($scope,$element,$attrs)msgData通過$scope$scope.msg愛創(chuàng)課堂$scope.ickt=}//scope:// 32windowRestrictECMAmy-directiveE自定義元素<my-directive></my-C<divclass=”my-Mdirectivemy-directiveA<divmy-Temte定義自定義指令單模Rece是否替False$scope$elementjqueryjquery實(shí)例化對象$attrs$attr表示駝峰式命名屬性到指令元素上屬性名稱的映射Scope作用域的，有沒有，如果要看scope的值False此時指令作用域與父作用域同享同一個，因此修改指令作用域會影響父作用域，修改父作用域會影響指令作用域此時指令作用域與父作用域是獨(dú)立，但是在指令元素內(nèi)的插值變量使用的是父作用域中的數(shù)據(jù)False此時指令作用域與父作用域共享同一個，因此修改指令作用域會影響父作用域，修改父作用域會影true的區(qū)別是，我們在這種情況下可以通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方法不論頁面中l(wèi)ink方法執(zhí)行之前執(zhí)行 .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