AngularJS私有變量在控制器功能

我是Angularjs的新手。我在網上遇到一個例子，它讓我感到非常困惑。下面是代碼：AngularJS私有變量在控制器功能

angular.module("testApp",[]).controller("testCtrl", function($scope){ 

    var data = "Hello"; 

    $scope.getData = function(){ 
     return data; 
    } 

    $scope.setData = function(newData){ 
     data = newData; 
    } 
});

這裏是視圖：

<html ng-app = "testApp"> 
    <head> 
     <script src="lib/Angular.js"></script> 
     <script src = "foo.js"></script> 
    </head> 
    <body ng-controller="testCtrl"> 
     <div ng-click="setData('Hello Hello')">{{getData()}}</div> 
    </body> 
</html>

我的問題是如何做的角度知道什麼時候觸發視圖中的getData（）方法。點擊事件將改變數據。然而，它是一個私有變量，不附加到$ scope，這意味着$ scope不會監視它的變化，那麼angular如何知道何時在視圖中調用getData（）？我知道這可能是一個愚蠢的問題，但請幫助！非常感謝！！

來源

2014-08-29 Ryan.Gao

有沒有機會鏈接到這個工作的小提琴？ – 2014-08-29 21:14:31

它實際上也附加到$ scope。 – 2014-08-29 21:28:49

Ade附上下面的Plnkr鏈接:) – 2014-08-29 21:41:01

的雙捲曲的表達是什麼AngularJS調用一個觀察指令。在編譯階段，該指令使用範圍的$watch方法在表達式上註冊偵聽器。

另一方面，ng-click是AngularJS所稱的聽衆指令。這種類型的指令會向DOM註冊偵聽器。每當DOM事件觸發時，該指令就會在$apply調用中執行關聯的表達式。

這意味着執行點擊表達式後，將開始$digest循環。在此週期中，範圍檢查所有已註冊的$watch表達式（例如，包含getData()的雙曲表達式），並在與先前值不同的情況下調用偵聽器。

最後，正是這個摘要循環確保您的所有綁定表達式被評估。

來源

2014-08-29 21:30:47

這是一個更好的解釋。 – Ade 2014-08-29 21:40:02

您的約束力{{getData()}}是「運行評估」。所以當DOM渲染和角度解析時，它會在最後看到()並運行該函數。當我找到它時，我會在一分鐘內提供引用。

來源

2014-08-29 21:20:09

頂級控制器函數在呈現視圖之前立即運行，以初始化範圍。接下來，視圖加載和視圖中的任何邏輯都會執行。所以當它到達getData()時，它會在那個時候返回那個函數的輸出。

聰明的部分是，Angular會自動將視圖中的數據綁定回數據模型，所以無論何時模型中的變化（即數據源）都會自動更新數據模型中的值視圖，如果有必要，將多次運行你的getData()方法。

我救了它here as a Plnkr

來源

2014-08-29 21:22:32 Ade

這是一個更好的解釋：} – 2014-08-29 21:24:16

非常感謝！我也喜歡@Razvan Mocanu的回答，但我決定去尋求簡單的解釋:) – 2014-08-29 21:42:17

@ Razvan的回答是一個更準確的解釋，雖然我的實際情況大致正確。 – Ade 2014-08-29 21:48:53

你不需要的getData在angularjs ...也許用於其他用途比你展示在那裏的一個。

所以正確的代碼是（沒有的getData）：

<html ng-app = "testApp"> 
    <head> 
     <script src="lib/Angular.js"></script> 
     <script src = "foo.js"></script> 
    </head> 
    <body ng-controller="testCtrl"> 
     <div ng-click="setData('Hello Hello')">{{data}}</div> 
    </body> 
</html>

而且具有的getData：

$scope.getData = function(){ 
     data = 'Hello World'; 
    } 

<html ng-app = "testApp"> 
    <head> 
     <script src="lib/Angular.js"></script> 
     <script src = "foo.js"></script> 
    </head> 
    <body ng-controller="testCtrl"> 
     <div ng-init="getData()" ng-click="setData('Hello Hello')">{{data}}</div> 
    </body> 
</html>

來源

2014-08-29 21:27:58 HRK

我不認爲這回答了這個問題。 – 2014-08-29 21:29:22

@ChristopherMarshall：我想說的是這個例子正在工作，因爲它調用了一個$ scope函數setData。但是如果你調用一個沒有鏈接到$ scope的內部函數，並且這個函數改變了數據變量，它將不會渲染。 – HRK 2014-08-29 21:41:40

AngularJS私有變量在控制器功能

回答

相關問題