iT邦幫忙

DAY 14
4

入門AngularJS筆記與前端領域的學習筆記分享系列 第 14

Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href

ng-href是什麼?

ng-href是用來取代html中 a 標籤裡的href屬性。

為什麼要使用ng-href?

如果Angular還沒載入或載入失敗,會直接讓href讀取到{{ }}的內容,
而a 標籤裡的href屬性無法辨識{{ }},就會連結到404的錯誤頁面。

<a href="http://www.gravatar.com/avatar/{{hash}}"/>

為了解決這個問題,我們可以使用ng-href指令,

就算遇到Angular還沒載入或載入失敗的情況,
ng-href僅會將{{}}裡面的值,當作一段字串,
避免發生連結錯誤的情況。

Demo:
http://jsbin.com/uqAseSi/4/edit
ng-href怎麼用?

原本href的寫法:

<a href="https://www.youtube.com/{{ y1 }}"> Youtube1 </a>

改成ng-href的寫法:

<a ng-href="https://www.youtube.com/{{ y2 }}"> Youtube2 </a>

簡單Demo:
http://jsbin.com/uqAseSi/4/edit

參考官方文件說明-

http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngHref

這篇文章也寫得不錯,

[AngularJS]AngularJS 入門教學 - ngHref 與 ngSrc

http://abgne.tw/angularjs/angularjs-getting-stared/nghref-ngsrc.html

---------------入門AngularJS筆記---------------

Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
http://ithelp.ithome.com.tw/question/10140193

Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用
http://ithelp.ithome.com.tw/question/10140147

Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
http://ithelp.ithome.com.tw/question/10140067

Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
http://ithelp.ithome.com.tw/question/10139851

Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
http://ithelp.ithome.com.tw/question/10139721

Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
http://ithelp.ithome.com.tw/question/10139571

Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
http://ithelp.ithome.com.tw/question/10139381

Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
http://ithelp.ithome.com.tw/question/10139077

Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
http://ithelp.ithome.com.tw/question/10139014

Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
http://ithelp.ithome.com.tw/question/10138821

Day17- 入門AngularJS筆記-AngularJS的timeout應用
http://ithelp.ithome.com.tw/question/10138627

Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
http://ithelp.ithome.com.tw/question/10138409

Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
http://ithelp.ithome.com.tw/question/10137781

Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href
http://ithelp.ithome.com.tw/question/10137625

Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
http://ithelp.ithome.com.tw/question/10137296

Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include
http://ithelp.ithome.com.tw/question/10136841

Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change
http://ithelp.ithome.com.tw/question/10136545

Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
http://ithelp.ithome.com.tw/question/10136011

Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
http://ithelp.ithome.com.tw/question/10135776

Day8- 入門AngularJS筆記-AngularJS指令(7): input
http://ithelp.ithome.com.tw/question/10135378

Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
http://ithelp.ithome.com.tw/question/10134889

Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init
http://ithelp.ithome.com.tw/question/10134415

Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show
http://ithelp.ithome.com.tw/question/10133625

Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
http://ithelp.ithome.com.tw/question/10133576

Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
http://ithelp.ithome.com.tw/question/10133017

Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
http://ithelp.ithome.com.tw/question/10132601

Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
http://ithelp.ithome.com.tw/question/10132196


上一篇
Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
下一篇
Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
系列文
入門AngularJS筆記與前端領域的學習筆記分享30

1 則留言

0
holyzack1123
iT邦新手 5 級 ‧ 2017-04-17 18:32:36

有點看不懂這篇用ng-href與不用的差別在哪....

我要留言

立即登入留言