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

AngularJS提供了不同的方法来观察/监视其元素和变量的变化。 $observe和$ watch是两个不同的方法，可以达到这个目的。 $observe是一个负责观察/观察DOM属性变化的方法。当我们想观察一个包含插值（{{}}的DOM元素时，我们使用$ observe。）

语法:

<!-- Interpolation Element -->
attr1 = "Name: {{name}}"
<!-- Syntax of Observe in controller -->
attrs.$observe('attr1', function() {
   // body
});

例子1：当我们点击超链接（最新的开关）时，属性在点击事件的基础上得到真或假。$observe正在观察其DOM中的变化，并相应地设置属性值。

<!DOCTYPE html>
<html ng-app="AngularObserveExample">
  
<head>
    <title>
        What is the difference between watch
        andobserve in AngularJS ?
    </title>
  
    <script src=
"http://code.angularjs.org/1.0.6/angular.min.js">
    </script>
  
    <script>
        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
            }
        }    
    </script>
</head>
  
<body>
    <div ng-app="observeApplication" ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="cue in cues" class="form-inline">
                <input type="text" ng-model="cues[$index].text"
                    focus="{{cue.isNew}}" class="input-xlarge" />
                {{cue.isNew}}</li>
        </ul>
        <a ng-click="switchNewest()">switch newest</a>
    </div>
</body>
</html>

输出:

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

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

语法:

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

例2：在这个例子中，我们把文本放在文本字段中，当光标向上或向下时，函数被调用，变化被$watch观察到，我们显示一个函数被调用的次数的计数。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
    </script>
  
    <script type="text/javascript">
        var app = angular.module('watchApplication', []);
        app.controller('watchCtrllr', function (scope) {
            scope.countCheck = -1;
            scope.watch('textval', function (newval, oldval) {
                scope.countCheck =scope.countCheck + 1;
            });
        });
    </script>
</head>
  
<body>
    <div ng-app="watchApplication" ng-controller="watchCtrllr"> 
        <h2>AngularJS watch() Function Example</h2>
        Enter Text:<input type="text" ng-model="textval" />
        <br /><br />
        <span style="color:Red">
            No. of Timeswatch() 
              Function Fired: {{countCheck}}
        </span>
    </div>
</body>
</html>

输出:

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

$watch和$observe之间的区别：

$watch	$observe
watch字符串/表达式/函数的变化。	observe DOM元素的变化。
$watch是触发文摘变化的一种方式。	$observe观察插值（{{}}元素的变化。
$watch使用$scope来观察其数值的变化。	$observe被用于指令的链接功能中。