如何观察服务变量？

$ scope充当AngularJs中的内置对象。

它由应用程序数据和方法组成。 $ scope充当控制器和视图(HTML)之间的链接。

$ scope用于传输数据。

$ watch：

AngularJs对象中的Scope具有$ watch事件，当更改或更改模型属性时，该事件会显示在图片中。

当从视图中的程序的某个点创建数据绑定到$ scope对象上的变量的数据绑定时，将在AngularJs内部创建一个监视。

当我们$ watch()一个函数时，摘要被多次函数。

每次绑定UI时，都会在$ watch列表中插入$ watch。

User: 
Password: 

例子：

    
        
            AngularJs $watch() Function with GFG
        
        
      
        
            var app = angular.module("watchApp", []);
            app.controller("watchCtrl", function ($scope) {
                $scope.count = -1;
                $scope.$watch(
                  "txtval", function (newval, oldval) {
                    $scope.count = $scope.count + 1;
                });
            });
        
    
    
        
            Enter Text:
          
            
            
              $watch() Function Fired: {{count}}
        
    

AngularJs中的$ watch是一项服务。

它用于跟踪给定范围内特定属性的更改。它类似于事件监听器。对指定变量的值进行更改。

注册手表时，我们将两个函数作为参数传递给$ watch()函数，这些函数是：

• 值函数
• 监听器函数

例子：

$scope.$watch(function() {}, //value function
             function() {}  //listener function
             );

观察者可以在以下方面更改响应：

1. 超时时间
2. 使用者介面
3. 网络工作者执行的复杂异步计算
4. Ajax通话

使用的方法： $ scope。$ watchGroup

$ watchGroup()是设置带有相同回调的观察者的快捷方式，它传递了watchExpressions数组。

$scope.$watchGroup([‘obj.a’, ‘obj.b.bb[4]’, ‘letters[8]’], function(newValues, oldValues, scope) {
//…
});

$ scope。$ watchCollection是监视数组或对象的快捷方式。在数组中，当替换，删除或添加任何元素时，将调用侦听器。

$ watch跟踪变量。该函数有两个参数：

1. 新价值

   $scope.$watch(‘expression’, function (newvalue, oldvalue) { //expression parameter
   //Code
   });

2. 旧值

   $scope.$watch(function () {}, function (newvalue, oldvalue) { //Function Parameter
   // Code
   });

例子：

    
   


  
    
        Message:  
        
        New Message: {{newMessage}} 
        Old Message: {{oldMessage}} 
    
    
        var ngApp = angular.module('myNgApp', []);
      
        ngApp.controller('myController', function ($scope) {
            $scope.message = "GeeksForGeeks!";
  
            $scope.$watch(
'message', function (newValue, oldValue) {
                $scope.newMessage = newValue;
                $scope.oldMessage = oldValue;
            });
        });
    

其他：

$ digest()

当AngularJS认为有必要时，我们调用$ digest()函数。

例如，在执行按钮单击处理程序之后，或者在返回AJAX调用之后。

$ apply()：

$ scope。$ apply()函数将函数作为参数执行，然后在内部调用$ scope。$ digest()。这有助于对所有手表进行检查

$scope.$apply(function() {
   $scope.data.myVar = "value";
});

$ Watch的示例：

    

        
Controller1
        

            

                

                  Send item one 
                

                  Send item two 
                
                

                  Send item three 
            
            

                

                  Send name: Geeks
                

                  Send name: For
                

                  Send name: Geeks
            
        
    
  
    

        
Controller2
        
Name is: {{ name }}
        

          {{ item.name }}
    

var app = angular.module('app', []);
  
app.factory('PostmanService', function() {
  var Postman = {};
  Postman.set = function(key, val) {
    Postman[key] = val;
  };
  Postman.get = function(key) {
    return Postman[key];
  };
  Postman.watch = function($scope, key, onChange) {
    return $scope.$watch(
        
      function() {
        return Postman.get(key);
      },
        
      function(newValue, oldValue) {
        if (newValue !== oldValue) {
          // Only update if the value changed
          $scope[key] = newValue;
          // Run onChange if it is function
          if (angular.isFunction(onChange)) {
            onChange(newValue, oldValue);
          }
        }
      }
    );
  };
  return Postman;
});
  
app.controller('FooCtrl', ['$scope',
                           'PostmanService', 
             function($scope, PostmanService) {
  $scope.setItems = function(items) {
    PostmanService.set('items', items);
  };
  $scope.setName = function(name) {
    PostmanService.set('name', name);
  };
}]);
  
app.controller('BarCtrl', ['$scope',
                           'PostmanService',
           function($scope, PostmanService) {
  $scope.items = [];
  $scope.name = '';
  PostmanService.watch($scope, 'items');
  PostmanService.watch(
       $scope,'name', function(newVal, oldVal) {
    alert('Hi, ' + newVal + '!');
  });
}]);

CSS：

.well {
 margin-top: 10px;
 margin-bottom: 10px;
}
  
p:last-child {
 margin-bottom: 0;
}