Submit Search
Upload
directive の作り方 @ 福岡 AngularJS 勉強会(第2回目)
•
2 likes
•
1,087 views
Kaido Iwamoto
Follow
AngularJS の directive の作り方について簡単に紹介しました。
Read less
Read more
Software
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 28
Download now
Download to read offline
Recommended
Cookbook Recipeでのサービス制御方法についてのご相談
Cookbook Recipeでのサービス制御方法についてのご相談
Ryuta Otaki
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
David Amend
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料
Toshio Ehara
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
Java電卓勉強会資料
Java電卓勉強会資料
Toshio Ehara
iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?
Toshio Ehara
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
Toshio Ehara
Recommended
Cookbook Recipeでのサービス制御方法についてのご相談
Cookbook Recipeでのサービス制御方法についてのご相談
Ryuta Otaki
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
David Amend
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料
Toshio Ehara
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
Java電卓勉強会資料
Java電卓勉強会資料
Toshio Ehara
iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?
Toshio Ehara
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
Toshio Ehara
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
More Related Content
Featured
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Featured
(20)
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
Skeleton Culture Code
Skeleton Culture Code
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
How to have difficult conversations
How to have difficult conversations
Introduction to Data Science
Introduction to Data Science
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
The six step guide to practical project management
The six step guide to practical project management
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
directive の作り方 @ 福岡 AngularJS 勉強会(第2回目)
1.
directiveの作り方 ᇠᜠᩡₖ#RGLDNB
2.
3.
自己紹介 ᇠᜠᩡₖ#ឪጁୡ῁ड़চॠজ
ኧडᜊؼ5DLOV$QJXODU-6चኻ⏶ব ῁ಡฑऄड616ॅⰇẗ $QJXODU-6ॅႛऴङඣኧं़ࣷ 7ZLWWHURGLDNB
4.
AngularJSの初心者に ありがちなこと
ࣖ$QJXODU-6ழഃओऄज࣋'20डᗛஂखङ जࣹऌिणࣷࣷॆओीࣹࣗ ࣖGLUHFWLYHखङडࣿࣵालऒࣷओऄज࣋ झॆࣾⲩऊऐࣹࣗ
5.
directive、難しくないよ!
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 ⟒⇃ढợ᷻
11.
12.
directiveを定義する
13.
YDUDSS DQJXODUPRGXOHDSS@
14.
DSSGLUHFWLYHP'LUIXQFWLRQ
15.
^ UHWXUQ^ आआञGLUHFWLYHडᅋ⋐
` `
16.
GLUHFWLYHญढ፱ऍキャメルケースच࣌ +70/डmy-directiveढmyDirectiveछऊङ➆
⫒ईिा
17.
例1) 文字を赤くする directive
18.
DSSGLUHFWLYHUHGIXQFWLRQ
19.
^ UHWXUQ^ UHVWULFW$
OLQNIXQFWLRQVFRSHHOHPDWWUV
20.
^ HOHPFVVFRORUUHG
21.
` ` `
22.
restrict:GLUHFWLYHड॰ॕঈॅᔣᅋ࣌ $ᆽᎦ࣋(❟↻࣋ॠচ४࣋ॸআग़জॹढ($
link:ॕতडᵅॅं࣌ VFRSH࣋❟↻࣋ᆽᎦडगࣿጆᘩञો़ࣻिा࣌ ₺ጆᘩढM4XHUଐᖁ
23.
ज़ই३क़ॠॹ
24.
使用例 S!+HOORVSDQUHG!'LUHFWLYHVSDQ!S!
25.
例2) テンプレートを 使ったdirective
26.
DSSGLUHFWLYHXVHUIXQFWLRQ
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ॅᔣᅋऊझࣷ࿔จ࣋❟↻ಡञᔺಎ
29.
使用例 DSSFRQWUROOHU7HVWWUOIXQFWLRQVFRSH
30.
^ VFRSHP8VHU ^
LFRQKWWSILOHRGLDNQHWLPDJHV BDQJXODUSQJ QDPHᇠᜠᩡₖ ` `
31.
GLYQJFRQWUROOHU 7HVWWUO! XVHUXVHULQIR
P8VHU!XVHU! GLY!
32.
33.
ई़ञ✯ⲝझॸভ॰ጲጁञऊऒऽ࣋66च४॰ ॕজॅᘫࣻिण࣋୬ऒऻࣹझ+70/ॅዀवं आछझं࣋⩫ॅℲණञಧഃᷔचऀा
34.
今まで作ったdirective 1. input要素のフォーカスを制御する
ᷠూड⪗ॅᔣᅋऊङ࣋ऐडছ४ॹॅ᷎ ᒝऌाᷠూड⧦ിবഒⱛव
35.
ᷠూॅᥛᙐጲञೳऽ෧खङ⛦ιऌा VKLIWफ़ভࣿᓷईिङࣷझࣷᲳᑁचHQWHU
फ़ভࣿᓷईिऒ࿔จञᵅॅᅏ⛗ऌा PRUHו
36.
1. input 要素の
フォーカスを制御する isFocused directive
37.
DSSGLUHFWLYH LV)RFXVHG IXQFWLRQ
38.
^ UHWXUQ^ UHVWULFW $
VFRSH^LV)RFXVHG ` OLQNIXQFWLRQVFRSHHOHPDWWUV
39.
^ VFRSHZDWFK LV)RFXVHG IXQFWLRQYDOXH
40.
^ LIYDOXH
41.
^HOHPIRFXV
42.
` `
43.
HOHPRQ EOXU IXQFWLRQ
44.
^ VFRSHDSSOIXQFWLRQ
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/ढુ⩫ợ᷻
50.
DQJXODUPRGXOH WHVW$SS @
51.
FRQWUROOHU 7HVWWUO IXQFWLRQVFRSH
52.
^ VFRSHIRFXV2Q,QSXW IXQFWLRQ
53.
^ VFRSHfocused WUXH
` `
54.
WKLVGHPR
55.
参考になる資料 0DVWHULQJ:HE$SSOLFDWLRQ 'HYHORSPHQWZLWK$QJXODU-6
GRFVDQJXODUMVRUJ DQJXODUMVQLQMDFRP
56.
console.log(ご静聴ありがとうございました。);
Download now