Jeff Wu's Note

Tags · Attribute Directives

Home

About

Archives

Angular 2DirectiveAttribute Directives

Angular Directive 初探 - Part.3

前兩篇文章,Part.1 和 Part.2 的介紹,可以認識到如何寫一個簡單且富有彈性的 directive 並套用,這次來嘗試將 jQuery datepicker 的執行改成 directive ,並認識一下 Angular Directive 的 Decorator 吧! 製作 jQuery datepicker 的 directive首先,npm 要先準備好 jquery 以及 bootstrap-datepicker,包含定義檔的部分: npm install jquery bootstrap @types/jquery @types/bootstrap-datepicker --save 相依套件安裝完成後,到 tsconfig.app.ts 中,將 types 的陣列加上 “jquery” ..

Read more
Angular 2DirectiveAttribute Directives

Angular Directive 初探 - Part.2

上一篇文章,我們初步了解 directive 基本的使用方式,這次來嘗試加入一些事件或值的傳遞,進一步體驗這強大又方便的 Angular Directive。 反應由使用者發起的事件目前 appHighlight 很單純的去改變一個元素的樣式而已,但 directive 可以做得更動態,例如我們可以指定當使用者將滑鼠移入或移出元素的時候,進行背景色的改變。在最上方從 @angular/core import 的部分加入 HostListener: import { Directive, ElementRef, OnInit, HostListener, Input, } from '@angular/core'; 然後加入兩個 eventhandle..

Read more
Angular 2DirectiveAttribute Directives

Angular Directive 初探 - Part.1

最近買了一本中國的 Angular 2 簡體書,想看看有別於自己的角度,如何介紹 Angular ,再加上想深入研究 directive 的部分,因此除了 Angular 官網,也參考了這本書的部分內容,希望對大家有所幫助。 Directive 又翻做 “指令”,但我還是習慣直接叫 directive 在 Angular 的世界中,directive 扮演相當重要的角色之一,它可以在特定的 DOM 元素上執行,進而擴充這個元素的功能,為元素增加新的方法。而我們最常用的元件 ( Component ),基本上就是一個帶有 template 的 directive,它繼承了 directive,是 directive 的一個子類別,通常用來打造 UI 的部分。 在開始介紹 directive 之前,稍微複習一下..

Read more