$ scope。$ watch如何工作

我寫了一個應用程序來理解Angular $scope.$watch()。但是在這樣做的時候遇到了一個我無法理解的問題。

使用以下代碼，我期待input框中的值正在更改語句「Data is changing !!」將被記錄到控制檯。

<!DOCTYPE html> 
    <html lang='en' ng-app="app"> 
     <head> 
     <meta charset="utf-8"> 
     <title>My $Scope.$watch demo</title> 
     </head> 
     <body> 
     <div ng-controller="MainController"> 
      <input ng-model='myData.val'> 
      <h1>{{myData.val}}</h1> 
     </div> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> 
     <script type="text/javascript"> 
      angular.module('app', []) 
      .controller('MainController', ['$scope', function($scope){ 
      $scope.myData = {}; 
      console.log($scope.myData); 
      $scope.myData = { val:"Bablo"}; 
      console.log($scope.myData.val); 
      $scope.$watch('$scope.myData.val', function(){ 
       console.log("Data is changing!!"); 
      }); 
      }]); 
     </script> 
     </body> 
    </html>

但是我沒有看到我所期待的，但是當我改變了$scope.$watch()參數myData.val（以前它是$scope.myData.val），它開始工作的罰款。爲什麼這樣？

如果我通過整個$scope.myData.val而不是mydata.val，這裏有什麼問題？

來源

2017-04-01 John Doe

得到變量字符串擺脫'$ scope.'。http://plnkr.co/edit/czqDzJ28TiYA6iDfOvsP?p=preview – charlietfl

但是爲什麼它必須這樣做，這是爲什麼我要求!! –

因爲這個變量暗示着'$ scope'的屬性已經在'internal'的內部被$ watch＃ – charlietfl

在寫$scope.$watch('model_name', function(){})您已經指的model_name$scope下，所以當你用$scope預置它，它會尋找$scope.$scope.model_name即$scope.$scope.myData.val你的情況。這就是爲什麼myData.val工作，爲什麼$scope.myData.val沒有。

來源

2017-04-01 16:11:15

這是在文檔中的某處提到的，只是爲了確保... –

@JohnDoe我沒有發現這是明確寫在文檔中的，但是可以從文檔中隱含'$ watch'的第一個參數，即'watchExpression '是你希望在'$ scope'上觀察的表達式/模型/數據值。 API Doc鏈接https://docs.angularjs.org/api/ng/type/$rootScope.Scope –

當你說$scope.$watch(..那麼就意味着角是看房產內$scope，由於視圖與ng-controller綁定，因此鑑於不需要屬性之前要追加$scope。

如果您將$scope附加到您的財產，角度尋找新的屬性$scope.$scope，當然這並不存在，並且只要您創建它（例如通過在視圖中追加$ scope，然後創建財產和它開始觀看。See this fiddle，並嘗試連接。

來源

2017-04-01 16:15:52 anoop

$ scope。$ watch如何工作

回答

相關問題