$scope.$watch 如何工作

debugcn 发表于 Dev

约翰·多伊

我写了一个应用程序来理解 Angular $scope.$watch()。但是这样做时遇到了一个我无法理解的问题。

使用以下代码，我期望当input框中的值更改语句“数据正在更改！！” 将被记录到控制台。

   <!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？

约格什·米斯特里

在编写时，$scope.$watch('model_name', function(){})您已经引用了model_nameunder $scope，因此当您在前面加上时$scope，它将在您的情况下查找$scope.$scope.model_nameie $scope.$scope.myData.val。这就是为什么myData.val工作和为什么$scope.myData.val没有的原因。