$ 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如何工作

回答

相关问题