Angular controller (續一, controller 還能做什麼?)

在上一篇 Angular controller 程式範例裡,  controller 只用來在 $scope 裡定義一個變數 (greeting), 並給了初始值 ('你好!'). 難道 controller 就只有 $scope 可以用嗎? 只能定義變數嗎?

No. 它還$scope 以外還可以 "Inject" (打針?) $http 等東西. (以後會專題討論 Dependency Injection.)

No. $scope 不只能定義變數, 它還能定義 function 且自動幫你呼叫它.

本文將說明如何用 Angular controller $scope 來定義一個 Javascript function 給 HTML 來用.

在 HTML 裡, 一個普普通通的 button (按鈕)加入一個參數型的內建 directive (ng-click), 將它等於一個 method 呼叫, 例如 ng-click="onClickSayHello()", 而這個 onClickSayHello function 要定義在 Javascript 程式裡的 "GreetingController" controller 的function之 $scope 裡, 例如

在前一篇 Angular controller 文章裡, 就有提到, $scope 就像一個在這 ng-controller 控制的範圍內類似一個所有變數的容器, 它在 Javascript 的定義的變數或方程式 (functions) 跟 HTML 裡都能互通. 因此, $scope.onClickSayHello 就等於 HTML 裡的 "onClickSayHello()", 所以當然 $scope.greeting 定義的變數, 在 HTML 也可以用, 例如將下面範例程式, ng-model="greeting", 或 HTML 隨便加一個 {{greeting}} 結果都會出現 '你好', 這就是它 data-binding 神奇好用的地方囖！

註一: 上圖的下方是 Google Chrome 瀏覽器, 打開 Tools->Javascript Console 的視窗. 你就可以看到 console.log 輸出 '你好!'

註二: 你有沒有發現, 其實你在學習使用 AngularJS 的過程中, 不知不覺的已經在使用 AngularJS 內建的 directive, 本文裡的 ng-click 就是其中之一, 詳細使用說明或其他內建directive, 請參考 https://docs.angularjs.org/api/ng/directive/ngClick 別忘了directive 的命名方式, 在 Javascript 裡他用 CamelCase (駱駝式) 像 ngClick, 在 HTML 裡呼叫要改名為 ng-click (dash 式). 多練習, 就不會忘記了.


你可以 fork 以下程式範例, 做練習, 例如將 console.log 改用 alert, 再按按 'Say Hello' button 看看效果如何?


http://codepen.io/mingderwang/pen/Hdrbe