directive の作り方 @ 福岡 AngularJS 勉強会(第2回目)
?
2 likes?1,087 views
AngularJS の directive の作り方について簡単に紹介しました。
directive の作り方 @ 福岡 AngularJS 勉強会(第2回目)
- 3. 自己紹介 ????#???????? ?????5DLOV$QJXODU-6???? ?????616???? $QJXODU-6????????? 7ZLWWHURGLDNB
- 4. AngularJSの初心者に ありがちなこと ?$QJXODU-6??????'20????? ???????????? ?GLUHFWLYH????????????? ????????
- 6. directiveとは ?????+70/?????? ?VFRSH????????'20????? $QJXODU-6???'20?????? GLUHFWLYH??? ???????????????
- 7. ロジックUI VFRSH? ????? ??????? 6HUYLFH RQWUROOHU Directive +70/
- 8. 組み込みdirective $QJXODU-6??????????? +70/???????????? QJFOLFNQJUHSHDWQJFRQWUROOHU? +70/???????????? DVHOHFWVFULSW? ????GLUHFWLYH???????$3,? ????????
- 9. directiveの3つのかたち ??PGLUHFWLYH!PGLUHFWLYH! ??LQSXWPGLUHFWLYH ! ???SFODVV PGLUHFWLYH!S! GLUHFWLYH?????????????? ??????????
- 10. directiveの処理が開始 するまで $QJXODU-6?+70/?????????? ??????GLUHFWLYH??????? ?????????????????? ?????FRPSLOH?OLQN??? FRPSLOH?VFRSH???OLQN ?????
- 12. 诲颈谤别肠迟颈惫别を定义する
- 15. ^ UHWXUQ^ ???GLUHFWLYH??? ` `
- 19. ^ UHWXUQ^ UHVWULFW$ OLQNIXQFWLRQVFRSHHOHPDWWUV
- 21. ` ` `
- 22. restrict:GLUHFWLYH???????? $???(?????????????($ link:?????????? VFRSH?????????????????? ????M4XHU??
- 23. ??????
- 27. ^ UHWXUQ^ UHVWULFW( VFRSH^ XVHU,QIR ` UHSODFHWUXH WHPSODWH ? GLYFODVV XVHU!? LPJQJVUF ^^XVHU,QIRLFRQ``!? S!^^XVHU,QIRQDPH``S!? GLY! ` `
- 28. scope: {userInfo: =} ?????VFRSH??XVHU,QIR????XVHULQIR?? ??????????????? replace: true ????????????????????? template: … +70/???????? WHPSODWH8UO????????+70/???????? ???? UHSODFHWUXH???????????????
- 30. ^ VFRSHP8VHU ^ LFRQKWWSILOHRGLDNQHWLPDJHV BDQJXODUSQJ QDPH???? ` `
- 31. GLYQJFRQWUROOHU 7HVWWUO! XVHUXVHULQIR P8VHU!XVHU! GLY!
- 34. 今まで作ったdirective 1. input要素のフォーカスを制御する ?????????????????? ????????????
- 35. ???????????????? VKLIW?????????????HQWHU ????????????????? PRUH?
- 36. 1. input 要素の フォーカスを制御する isFocused directive
- 38. ^ UHWXUQ^ UHVWULFW $ VFRSH^LV)RFXVHG ` OLQNIXQFWLRQVFRSHHOHPDWWUV
- 40. ^ LIYDOXH
- 41. ^HOHPIRFXV
- 42. ` `
- 45. ^ VFRSHLV)RFXVHG IDOVH `
- 46. `
- 47. ` ` `
- 48. - scope.$watch() ??????????????????????? ????????? - scope.$apply() ??????????????????VFRSH?? ZDWFK???????????????????? ????ZDWFK????????????? - $watchと$applyの2つがAngularJSのデータバイン ディングの基本
- 49. 使用例 GLYQJFRQWUROOHU 7HVWWUO! EXWWRQng-click=focusOnInput()!FOLFNPH EXWWRQ! LQSXWWSH LQSXWis-focused=focused! GLY! +70/?????
- 53. ^ VFRSHfocused WUXH ` `
- 54. WKLVGHPR
- 55. 参考になる資料 0DVWHULQJ:HE$SSOLFDWLRQ 'HYHORSPHQWZLWK$QJXODU-6 GRFVDQJXODUMVRUJ DQJXODUMVQLQMDFRP