2014-03-28 20 views
10

我對JavaScript很新穎(剛剛完成了Eloquent Javascript一書),目前我正在閱讀O'Reilly的AngularJS。從這本書中得到這段小小的代碼片段讓我瘋狂了好幾個小時,並讓我陷入了兔子洞,因爲我認爲自己在設置我的環境時陷入了困境。 AngularJS書籍和我輸入的代碼提供的代碼唯一的區別是我在TextController函數的「$ scope」中省略了'$'。把'$'放回允許代碼工作。

這是我最初拋棄它的推理: 哦,'$ scope'只是該函數本地的一個變量名。像任何其他編程語言(如Java或C++)一樣,因爲此參數只是一個局部變量,所以我可以將其命名爲任何我想要的名稱,因爲傳遞給該函數的任何參數都只能通過值傳遞。

請糾正我的推理,並解釋爲什麼參數的名稱必須是「$ scope」。

<!doctype html> 
<html ng-app> 

<body ng-controller="TextController"> 

    <p>{{someText}}</p> 

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

    <script> 
    function TextController($scope) { 
     $scope.someText = 'You have started your journey.'; 
    } 
    </script> 

</body> 

</html> 
+0

依賴注入 – Jess

+0

依賴注入與注入基於參數名稱的事實。 (許多人往往忘記提及最後的細節。) – Johan

回答

6

這是由角注射器處理。

http://docs.angularjs.org/api/auto/service/ $注射器

在JavaScript調用toString()的函數返回函數定義。然後可以解析定義並提取函數參數。注意:這不適用於縮小和混淆工具,因爲這些工具會更改參數名稱。

http://docs.angularjs.org/guide/di

給出一個函數注射器可以推斷出該服務的名稱通過檢查函數聲明和提取參數名稱注入。在上面的示例中,$ scope和greeter是需要注入到函數中的兩個服務。

+2

Omg,我知道什麼是依賴注入,但我從來沒有想過Angular在函數中使用toString()來提取名稱。所以在某些時候它實際上特別尋找「$ scope」。 第一個鏈接真的爲我清除它。謝謝! – Kacy

+1

這是「真的嗎?他們是這麼做的!」!時刻。請享用! :-) – ceejayoz

6

兩個以前的答案是正確的,只是你應該知道,你可以「覆蓋」的默認行爲,如果你宣佈一個控制器是這樣的:

module.controller("ControllerName",["$scope",function(custom_name){ ... }]); 

例子:

var app = angular.module("myApp",[]); 

app.controller("TextController",["$scope",function(glue){ 
    glue.name1 = "John"; 
    glue.name2 = "Paul"; 
    glue.name3 = "George"; 
    glue.name4 = "Ringo"; 
}]); 

和然後:

<div ng-controller="TextController"> 
    Hello {{ name1 }}, {{ name2 }}, {{ name3 }}, {{ name4 }}! 
</div> 

在這裏工作:http://jsfiddle.net/d4M2P/

+2

偉大的補充和從我+1。 – ceejayoz

相關問題