AngularJS proporciona diferentes métodos para observar los cambios en sus elementos y variables. $observe y $watch son dos métodos diferentes que sirven para este propósito.
$observe: Es un método que se encarga de observar los cambios en el atributo DOM. Usamos $observe cuando queremos observar un elemento DOM que contiene interpolación ({{}}).
Sintaxis:
HTML
<!-- Interpolation Element -->
attr1 = "Name: {{name}}"
<!-- Syntax of Observe in controller -->
attrs.$observe('attr1', function() {
// body
});
Ejemplo: aquí, cuando hacemos clic en el hipervínculo (cambiar más nuevo), el atributo se vuelve verdadero o falso en función del evento de clic. $observe está observando los cambios en su DOM y colocando los valores de atributo en consecuencia.
HTML
<!DOCTYPE html>
<html ng-app="AngularObserveExample">
<head>
<title>
What is the difference between $watch
and $observe 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>
Producción:
$watch: Para observar cualquier expresión, ya sea una función o una string, usamos un método $watch. Es un método en el objeto $scope, por lo tanto, se puede usar donde sea que tenga acceso a un objeto scope (incluye cualquier controlador o función de enlace en la directiva). Cuando queremos observar/observar cualquier propiedad de modelo/alcance, usamos $watch.
Sintaxis:
HTML
attr1 = "myModel.some_prop";
scope.$watch(attrs['attr1'], function() {
// body
});
Ejemplo: En este ejemplo, estamos colocando el texto en el campo de texto y, cuando el cursor está hacia arriba o hacia abajo, se llama a la función. $watch observa los cambios y mostramos el recuento de la cantidad de veces que se llama a una función.
HTML
<!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 Times $watch() Function Fired: {{countCheck}}
</span>
</div>
</body>
</html>
Producción:
Diferencia entre $observar y $ver:
| $ver | $observar |
|---|---|
| Observe los cambios en la string/expresión/función. | Observe los cambios en el elemento DOM. |
| $watch es una forma de activar cambios en el resumen. | $observe los cambios de los relojes en los elementos de interpolación ({{}}). |
| $watch usa $scope para observar cambios en sus valores. | $observe se usa en la función de enlace de las directivas. |