Angular Directive 初探 - Part.4
在初探 part.1 的時候，提到了 Angular directive 有分三種，Component, Attribute Directive and Structural Directive，而之前介紹了 Attribute Directive，知道如何建立與使用，這次就來研究一下 Structural Directive 吧！ 什麼是 structural directive ?Structural directives 負責 HTML 的 layout。通常是藉由加入、移除或操作 element ，將 DOM 架構進行繪製或重繪的動作，就和其他的 directives 使用方式一樣，套用到 HTML host element 上，並且依照這個 directive 有什麼功能去進行處理，而被套用的 h..
Read moreAngular 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 moreAngular Directive 初探 - Part.2
上一篇文章，我們初步了解 directive 基本的使用方式，這次來嘗試加入一些事件或值的傳遞，進一步體驗這強大又方便的 Angular Directive。 反應由使用者發起的事件目前 appHighlight 很單純的去改變一個元素的樣式而已，但 directive 可以做得更動態，例如我們可以指定當使用者將滑鼠移入或移出元素的時候，進行背景色的改變。在最上方從 @angular/core import 的部分加入 HostListener： import { Directive, ElementRef, OnInit, HostListener, Input, } from '@angular/core'; 然後加入兩個 eventhandle..
Read moreAngular Directive 初探 - Part.1
最近買了一本中國的 Angular 2 簡體書，想看看有別於自己的角度，如何介紹 Angular ，再加上想深入研究 directive 的部分，因此除了 Angular 官網，也參考了這本書的部分內容，希望對大家有所幫助。 Directive 又翻做 “指令”，但我還是習慣直接叫 directive 在 Angular 的世界中，directive 扮演相當重要的角色之一，它可以在特定的 DOM 元素上執行，進而擴充這個元素的功能，為元素增加新的方法。而我們最常用的元件 ( Component )，基本上就是一個帶有 template 的 directive，它繼承了 directive，是 directive 的一個子類別，通常用來打造 UI 的部分。 在開始介紹 directive 之前，稍微複習一下..
Read more
Angular FormGroup 取得所有 formControl 的值
消失的欄位資料最近在專案上遇到表單處理的問題，主要是 UI 上的需求是有條件的 disabled 控制項，換句話說，在某些情況下，指定的表單控制項在畫面上要是鎖定的狀態，但是在呼叫 API 的時候還是得要取得欄位鎖定的內容。強者我同事，在準備回傳給 API 的物件資料時，偶然發現到控制項在 disabled 的狀態下，FormGroup 是取不到 disabled 欄位 Value 的，究竟那消失的欄位到底是去哪了？明明在畫面上，DOM 也有值在裡面，為何就是取不到？ 原來…欄位一直都在，從沒離開過。
Read more