接上篇文章
這篇文章我將介紹一下使用自定義指令來監(jiān)聽元素的事件。
首先，讓我們來看一下最終實(shí)現(xiàn)效果
圖1 鼠標(biāo)移除效果圖
圖2 鼠標(biāo)移入效果圖
圖1顯示了鼠標(biāo)移出的效果，當(dāng)我們把鼠標(biāo)移入籃筐時(shí)，會(huì)變成圖2的效果，即籃框背景由白色變成黃色，底部出現(xiàn)一行紅色的字。
下面我們來分析一下代碼：
圖3 代碼截圖
1. 添加一個(gè)輸入屬性，這個(gè)輸入屬性將作為指令的配置項(xiàng)。這里，我們以對(duì)象的形式來定義這個(gè)輸入項(xiàng)，可以看做是為了日后的擴(kuò)展做準(zhǔn)備，如果后面還有別的東西需要配置，直接加到這個(gè)配置項(xiàng)里即可。在這個(gè)輸入屬性的裝飾器里，我為該輸入屬性定義了一個(gè)和當(dāng)前指令選擇器相同的別名，這是因?yàn)?，如果我不這么寫的話，該配置項(xiàng)只能以如下方式使用：
<div class="wrapper" appFirstDirective [config]="{querySelector: 'p'}">而我期望的是如下這種使用方式：
<div class="wrapper" [appFirstDirective]="{querySelector: 'p'}">
也就是說，為該指令的輸入屬性定義一個(gè)和指令選擇器相同的別名，就可以使用屬性綁定的方式來使用指令內(nèi)定義的輸入屬性了。這里有一個(gè)隱藏的語義，即定義在指令內(nèi)的輸入屬性，其目標(biāo)其實(shí)就是該指令的宿主，可以理解成在指令內(nèi)部為其宿主定義一個(gè)輸入屬性（當(dāng)然，這是我個(gè)人的理解，可能不是很準(zhǔn)確）。
2. 使用HostBinding裝飾器為宿主添加一個(gè)屬性綁定。這一行代碼的意思就是說，當(dāng)變量isHovering的值為true時(shí)，當(dāng)前指令就會(huì)為宿主添加一個(gè)名為"yellowBackground"的class，當(dāng)變量isHovering的值為false時(shí)，當(dāng)前指令就會(huì)從宿主上移除名為"yellowBackground"的class。
3. 使用HostListiner裝飾器監(jiān)聽宿主的事件。這一行代碼的意思就是說，監(jiān)聽宿主的"mouseover"事件，并當(dāng)該事件觸發(fā)時(shí)，執(zhí)行我們這里定義的"onMouseOver"方法?？梢钥吹剑谖覀兊摹眔nMouseOver“事件的實(shí)現(xiàn)最后一行，我們將2中提到的isHovering變量賦值為true，這樣，在"mouseover"事件觸發(fā)，即鼠標(biāo)移入宿主對(duì)象時(shí)，宿主對(duì)象就會(huì)被添加一個(gè)"yellowBackground"的class。
4. 同3。
5. 我們需要注釋掉在前面一張中用于修改宿主背景的這一行代碼，否則，當(dāng)isHovering變成true，宿主對(duì)象添加了"yellowBackground"這個(gè)class以后，宿主的背景也無法變成黃色。我的理解是，通過代碼直接修改的宿主對(duì)象的屬性擁有最高的優(yōu)先級(jí)。
6. 為最終效果添加一點(diǎn)sytle。
7.?使用指令，并同時(shí)綁定配置對(duì)象。
8. 用于 隱藏 / 顯示 的段落。在這里，我將其默認(rèn)的style設(shè)置成"display:none"，這樣，默認(rèn)情況下，該段落是隱藏的，當(dāng)鼠標(biāo)移入籃框時(shí)，就會(huì)觸發(fā)"mouseover"事件，然后后面的過程就如3中討論的那樣了。在指令的"onMouseOver"處理函數(shù)中，我們首先獲取到了宿主對(duì)象，并通過"querySelector"函數(shù)獲取到了宿主對(duì)象上的段落，然后，將該段落的display賦值為block，最終，該段落就顯示出來了。
自定義指令涉及的知識(shí)點(diǎn)應(yīng)該差不多都在這里了，我們可以使用自定義指令來實(shí)現(xiàn)許多功能。接下去，我計(jì)劃使用指令來實(shí)現(xiàn)一個(gè)angular版的lightbox插件。
