AngularJS 中的 $watch 和 $observe 有什么区别？

AngularJS 提供了不同的方法来观察/观察其元素和变量的变化。 $observe 和 $watch 是用于此目的的两种不同方法。

$observe：是一种负责观察/观察DOM属性变化的方法。当我们想要观察包含插值 ({{}}) 的 DOM 元素时，我们使用 $observe。

句法：

HTML

attr1 = "Name: {{name}}"
 

attrs.$observe('attr1', function() {
    // body
});

示例：这里当我们点击超链接（切换最新）时，该属性根据点击事件为真或假。 $observe 正在观察其 DOM 中的变化并相应地放置属性值。

HTML

 

    
        What is the difference between $watch
        and $observe in AngularJS ?
    
 
    
    
 
    
        var myApp = angular.module('observeApplication', []);
 
        myApp.directive('focus', function () {
            return function (scope, element, attrs) {
                attrs.$observe('focus', function (newValue) {
                    newValue === 'true' && element[0].focus();
                });
            }
        });
 
        function MyCtrl($scope) {
            $scope.cues = [{
                text: 'text for the first item',
                isNew: false
            }, {
                text: 'text for the second item',
                isNew: true
            }];
            $scope.switchNewest = function () {
                $scope.cues[1].isNew = !$scope.cues[1].isNew
                $scope.cues[0].isNew = !$scope.cues[0].isNew
            }
        }   
    

 

    
        
            
                
                {{cue.isNew}}
        
         
        switch newest
    

 

输出：

$watch：要观察任何表达式，无论是函数还是字符串，我们都使用 $watch 方法。它是 $scope 对象上的一个方法，因此，它可以在您可以访问范围对象（包括指令中的任何控制器或链接函数）的任何地方使用。当我们想观察/观察任何模型/范围属性时，我们使用 $watch。

句法：

HTML

attr1 = "myModel.some_prop";
scope.$watch(attrs['attr1'], function() {
    // body
});

示例：在此示例中，我们将文本放在文本字段中，当光标向上或向下时，函数被调用，$watch 观察到的变化，我们正在显示函数被调用的次数。

HTML

 

    
    
 
    
        var app = angular.module('watchApplication', []);
        app.controller('watchCtrllr', function ($scope) {
            $scope.countCheck = -1;
            $scope.$watch('textval', function (newval, oldval) {
                $scope.countCheck = $scope.countCheck + 1;
            });
        });
    
 

 

    
         
        AngularJS $watch() Function Example
         
        Enter Text:
         
        
         
        
            No. of Times $watch() Function Fired: {{countCheck}}
        
    

 

输出：

$observe 和 $watch 的区别：

$watch	$observe
Observe changes in string/expression/function.	Observe changes in DOM element.
$watch is a way of triggering changes in digest.	$observe watches changes in interpolation ({{}}) elements.
$watch uses $scope to watch changes in its values.	$observe is used in linking function of directives.