歡迎轉載(註明出處)或直接轉貼網址也ok,但是請不要直接把內容摳走貼在別的地方~

因為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 的表單驗證與資料檢查

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(4) 人氣()


留言列表 (4)

發表留言
  • zack
  • 版主您好:
    想請教一個問題,我發現只要使用button,做完動作後,頁面會自動更新畫面,感覺也很像是submit出去,可是我在您頁面上的範例直接執行卻不會發生這樣的問題。

    目前我發生問題的code也是直接複製版主的code。

    想請教是不是我有設定不對的地方,謝謝!
  • hello
    請問一下你後端是用什麼開發,php 還是.net? (還是只是單純的html)
    目前我遇到的是,如果用.net傳統 web from 是會這樣沒錯
    需要做一些加工處理...不然你把<form>的 runat=server 拿掉就可以了
    如果是php就把<form>的action 拿掉試試看吧~

    小雕 於 2015/08/25 14:04 回覆

  • zack
  • 版主您好:

    我是用.net開發,可是我並沒有使用.net的控制項,而是用html的input,所以這樣也會自動更新畫面嗎?

    我記得是用按鈕控制項才會發生這個事件,單純用html的input不會。

    如果真的是這樣,想請教必須如何加工?

    再麻煩版主解惑,謝謝!
  • hello

    其實跟server or html control 沒有關係,主要是form裡面如果有action屬性的話就會被導頁,然後傳統.net web form 的問題就是 <form runat="server"> 那個 runat="server" 因為postback的關係(會自己產生action屬性),所以會action到自己,解決的方法有幾種.....
    1.拿掉runat="server"
    2.在按下按鈕的時候無論如何返回 return false

    但其實啊......net 傳統web form不太適合使用angularjs,主要還是因為postback機制的關係,但是.net MVC就非常適合

    補充 :
    如果還是要繼續寫的話,可以參考一下我寫的這篇
    http://sweeteason.pixnet.net/blog/post/42303799#a6

    這可能也是你之後會遇到的問題

    小雕 於 2015/08/25 17:30 回覆

  • zack
  • 版主您好:

    我特地把原本在.net的code搬到文字檔存成html,Form的action屬性不設定,結果還是一樣,但是我發現只要在標籤<form>加上action的屬性並給"#",第一次會還是會自動更新,但第二次就不會。

    我很好奇的是,在一般的html裡,如果我的按鈕type不為submit或執行按鈕並沒有去執行document.form[0].submit的動作,理論上來說不應會有自動action的事件。

    下列是有action="#"的code,這部份為什麼只有第一次有action的動作,第二次就不會有,真的有點奇怪,再麻煩版主協助解惑,非常感謝!

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>

    <script src="angular.min.js"></script>

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

    </head>
    <body>
    <form id="form1" action="#">
    <div ng-app="ModuleA" ng-controller="MsgController">
    <div ng-click="Item1='hi 你好!'">{{ Item1 || "按一下"}}</div>

    <div>
    <input type="text" ng-model="say" />
    <button ng-click="say='hello 你好!'">按一下</button>
    </div>
    <div>
    {{count || 0}}
    <button ng-click="count = count + 1">+1</button>
    </div>
    <div>
    <button ng-click="Say()">觸發 controller 中的方法</button>
    </div>
    </div>
    </form>
    </body>
    </html>
  • hi zack,

    其實<button>可以當成是<input type="submit" />喔
    在早期ie8 才等於是 <input type="button" />
    你可以拿下面這個例子來測測看就會瞭解了

    test.html
    ========================
    <form action="test.html">
    <button>test</button>
    <input type="hidden" name="id" value="123">
    </form>

    按下按鈕是會送出的,送出後網址變這樣 test.html?id=123
    除非你加上type屬性 <button type="button">test</button>
    而 action="#" 則是代表本頁的錨點
    如果像上面的例子你寫成 action="#a"
    就可以看出來送出後會變成 test.aspx?id=123#a
    會直接跳到 test.aspx 的#a 錨點

    小雕 於 2015/08/28 14:22 回覆

  • zack
  • 版主您好:

    我已經找到問題了,您給的code把 ng-app="ModuleA" 放在div的那一層,我剛剛嘗試把 ng-app="ModuleA" 放到 form裡就沒問題了,就可以如您給的範例執行結果一樣了,看起來ng-app="ModuleA"跟ng-controller="MsgController"是不能放在同一個tag裡嗎?

    <form id="form1" ng-app="ModuleA">
    <div ng-controller="MsgController">
  • hi zack,

    放在一起是可以的喔
    因為我都這樣寫沒有遇到問題,也很多人都這樣寫
    但其中的差異除了ng-app scope 的範圍之外還有沒有其他影響
    這個我回去研究一下再回覆你囉!

    我指的是...
    寫在一起就代表沒有再跟ng-controller同一層的controller
    (當然還是可以有子controller)

    <div ng-app ng-controller="A"></div>

    分開寫就可以有多個同一層 ng-controller
    <div ng-app>
    <div ng-controller="A"></div>
    <div ng-controller="B"></div>
    </div>

    小雕 於 2015/08/28 14:34 回覆