angular知识积累.docVIP

angular知识积累 **formName.$invalid** ```jade form(name=myForm,ng-submit=save(),ng-controller=formCtrl) input(name=username,ng-model=user.username, required) input(type=submit, ng-disabled=myForm.$invalid) ``` --- `ng-app`鍦ㄥ悓涓€椤甸潰瀹為檯鍙互鏈夊涓殑锛屼絾瀹冧滑涓嶈兘鏄祵濂楃殑鍏崇郴锛侀粯璁ゅ惎鍔ㄧ1涓猔ng-app`锛岃嚦浜庣2涓氨闇€瑕佹墜鍔ㄥ惎鍔紝浣嗕竴鑸彧鐢ㄤ竴涓猲g-app --- **鎸囦护鐨剆cope缁戝畾绛栫暐** - `@`缁戝畾锛氫紶閫掑瓧绗︿覆鐨勫€硷紝瀵瑰簲鐨勬槸瀛楃涓?- `=`缁戝畾锛氬弻鍚戞暟鎹粦瀹氾紝瀵瑰簲鐨勬槸涓€涓彉閲?- ``璐熻矗璋冪敤鏂规硶锛屽搴旂殑鏄竴涓嚱鏁扮殑璋冪敤 jade閮ㄥ垎锛? ```jade div(ng-controller=MyCtrl) | Ctrl: input(type=text,ng-model=ctrlFlavor) | Directive: drink(flavor=ctrlFlavor, taste={{ctrlFlavor}}, pour=fnPour(thing)) ``` javascript閮ㄥ垎锛? ```javascript app.controller(MyCtrl, function($scope){ $scope.ctrlFlavor = 鐧句簨鍙箰 $scope.fnPour = function(thing){ console.log(thing) } }) app.directive(drink, function(){ return { restrict: AE, scope: { // 瀹炵幇鐨勬槸瀛楃涓蹭紶閫? taste: @, // 瀹炵幇鏁版嵁鍙屽悜缁戝畾 // flavor灞炴€т笂鐨刢trlFlavor锛岀浉浜掍紶閫? // flavor = ctrlFlavor flavor: =, // =鍙蜂篃鍙繖鏍峰啓 title: =expanderTitle, // 鏂规硶璋冪敤 pour: }, template: Taste: {{taste}}, input type=text ng-model=flavor /+ // pour鏂规硶浼犺繘鍘荤殑鏄竴涓璞★細thing缁戝畾鐨勬槸flavor button ng-click=pour({thing:flavor})鎻愪氦/button } }) ``` --- **compile鍑芥暟** 涓€鑸緢灏戠敤compile鍑芥暟 compile鍑芥暟鏄敤浜庡鎸囦护鏈韩鐨勬ā鏉胯繘琛岃浆鎹? link浣滅敤鏄湪妯″瀷鍜岃鍥句箣闂村缓绔嬪叧鑱旓紝鍖呮嫭鍦―OM涓婃敞鍐岀洃鍚? compile鍑芥暟鍜宭ink鍑芥暟涓嶄細鍚屾椂鍑虹幇銆傚鏋滃悓鏃跺嚭鐜扮殑璇濓紝link鍑芥暟浼氭棤鏁堬紝angular浼氭墽琛岀殑鏄痗ompile鍑芥暟杩斿洖鐨刲ink鍑芥暟 瀵逛簬鍚屼竴鎸囦护鐨勫涓疄渚嬶紝compile鍑芥暟鍙細鎵ц涓€娆★紝鑰宭ink鍑芥暟瀵规瘡涓疄渚嬮兘浼氭墽琛屼竴娆? html: ```html div alotofhello=5 phello, boy!/p /div ``` js: 鍏朵腑鏈€閲嶈鐨勪竴鐐规槸锛宑ompile鍑芥暟蹇呴』杩斿洖link鍑芥暟锛岃繖鏄痑ngular鐨勮瀹? ```javascript myApp.directive(alotofhello, function(){ return { restrict: A, compile: function(el,attrs,transclude){ // 瀵规爣绛捐繘琛屼竴浜涘彉鎹? var tpl = el.children().clone()