小雕雕的家

因為pixnet 的文章編輯有些問題所以第二篇一直難產，有時打了 {{  }} 會直接消失

回報之後到現在過了一個禮拜還沒找到問題，只好先直接發布了

=================================================

繼上一篇學習了 AngularJS 的架構、表達式、Controller、Module 的用法

這次要來玩玩看內建的指令 (Directive) 

Directive 的官方說明在此

https://docs.angularjs.org/guide/directive

這次先不管自訂 Directive，先來玩玩看幾個內建可能會常用的 

文件在此

https://docs.angularjs.org/api/ng/directive

 

ng-click

文件：https://docs.angularjs.org/api/ng/directive/ngClick

AngularJS 的事件之一，當滑鼠點擊後會觸發

但要注意它不像一般 javascript onclick 一樣按下去可以直接做一些原生js的動作

例如 : 

<button ng-click="alert('')">按一下</button>

這樣就沒反應，因為 ng-click 是 AngularJS 的事件

所以還是要透過 AngularJS 的表達式或 controller 來操作

如以下幾個例子：

1. 直接指定表達式的值

<div ng-click="Item1='hi 你好!'">{{ Item1 || "按一下"}}</div>

2. 指定 ng-model 的值

<input type="text" ng-model="say" />
<button ng-click="say='hello 你好!'">按一下</button>

3. 按下去時累加 (這是官網的範例)

{{count || 0}}
<button ng-click="count = count + 1">+1</button>

4. 觸發方法

<div>
    <button ng-click="Say()">觸發 controller 中的方法</button>
</div>

JS：

var moduleA = angular.module("ModuleA",[]);
moduleA.controller("MsgController",function($scope) {
    $scope.Say = function(){
       alert('hello');
    };
});

 上面幾個範例如下，可以切換一下 result 看結果

 

ng-dblclick

文件：https://docs.angularjs.org/api/ng/directive/ngDblclick

跟 ng-click  一樣用法

 

ng-show、ng-hide

文件：https://docs.angularjs.org/api/ng/directive/ngShow

這兩個都是用來控制顯示與隱藏的，但是用慣了jQuery 會有點不習慣這兩個用法

而且覺得有點搞混到底是顯示還隱藏，後來終於搞懂

首先來看幾個範例

範例一：

<div ng-app>

<div ng-hide>Message1</div>

<div ng-show>Message2</div>

</div>

你會得到這樣的答案：

Message1

本來以為直接下 ng-hide 就隱藏了，結果反而顯示

這是因為對 ng-hide 而言，沒給屬性就是 false

ng-hide = false 就是 show 了，反之就是隱藏

所以上面那個例子等同於下面

<div ng-app>

<div ng-hide="false">Message1</div>

<div ng-show="false">Message2</div>

</div>

 

再來看看下面

範例二：

<div ng-app>

<div ng-hide="sw">Message1</div>

<div ng-show="sw">Message2</div>

<button ng-click="sw=true">click</button>

</div>

ng-show、ng-hide 都根據 sw 而決定要顯示或隱藏

然後在按下 button 後將 sw 的值指定為 true

就會得到如下的結果

範例三：

<div ng-app>

<select ng-model="city">

<option value="taipei">台北</option>

<option value="tainan">台南</option>

</select>

<div ng-show="city == 'taipei'">你選了台北</div>

<div ng-show="city == 'tainan'">你選了台南</div>

</div>

下拉選單的 ng-model 設為 city

下面兩個 div 就直接判斷 city 的值來決定是否 ng-show

按下面的result看結果

範例四：

n-show 跟 checkbox 綁定，只要被核取就是 true

<div ng-app="">

<input type="checkbox" ng-model="check1" />顯示

<div ng-show="check1">hello</div>

</div>

 

 

AngularJS 學習筆記系列 : (依本人的上進心持續增加)

AngularJS 初學者筆記與教學 (一) - 使用方式、Expression、Controller、Module

AngularJS 初學者筆記與教學 (二) 內建的簡單指令之1 ng-click、ng-show、ng-hide

AngularJS 初學者筆記與教學 (三) - AngularJS 的載入流程與 ng-cloak 運作原理 

AngularJS 初學者筆記與教學 (四) - 如何動態改變 CSS 樣式，使用 ng-class、ng-style

AngularJS 初學者筆記與教學 (五) - 繼續深入學習常用的 ng-repeat

AngularJS 初學者筆記與教學 (六) - 單元測試

AngularJS 初學者筆記與教學 (新手入門課程 - 課後心得篇)

AngularJS 初學者筆記與教學 (七) - FormController 的表單驗證與資料檢查