Question

我写了一个应用程序来理解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，那么问题是什么？

Answer 1

在撰写$scope.$watch('model_name', function(){})时，您已经在model_name下引用了$scope，因此当您使用$scope作为前缀时，它会查找$scope.$scope.model_name即{ {1}}在你的情况下。这就是$scope.$scope.myData.val工作的原因以及为什么myData.val没有。

Answer 2

当您说$scope.$watch(..时，这意味着angular正在关注$scope内的属性，并且因为视图与ng-controller绑定，因此视图中不需要追加$scope在属性之前。

如果您将$scope追加到您的媒体资源，则角度会查找新属性$scope.$scope，这当然不存在。并且只要您创建此属性（例如附加$）在视图范围内，然后创建属性并开始观察它。See this fiddle并尝试连接。

$ scope。$ watch的工作原理

2 个答案: