$scope actúa como un objeto integrado en AngularJs.
Consiste en datos y métodos de aplicación. El $scope actúa como un enlace entre un controlador y una vista (HTML).
$scope se utiliza para transferir los datos.
$ver:
El objeto Scope en AngularJs tiene un evento $watch que aparece en la imagen cuando la propiedad del modelo se modifica o modifica.
Cuando se crea un enlace de datos desde algún punto del programa en la vista a una variable en el objeto $scope, se crea un reloj internamente en AngularJs.
El resumen se llama varias veces, cuando $watch() una función.
Cada vez que vinculamos la interfaz de usuario, insertamos $watch en $watch list.
User: <input type="text" ng-model="user" /> Password: <input type="password" ng-model="pass" />
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs $watch() Function with GFG
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script type="text/javascript">
var app = angular.module("watchApp", []);
app.controller("watchCtrl", function ($scope) {
$scope.count = -1;
$scope.$watch(
"txtval", function (newval, oldval) {
$scope.count = $scope.count + 1;
});
});
</script>
</head>
<body>
<div ng-app="watchApp"
ng-controller="watchCtrl">
Enter Text:<input type="text"
ng-model="txtval" />
<br />
<br />
<span style="color: Green;">
$watch() Function Fired: {{count}}</span>
</div>
</body>
</html>
Producción
$watch en AngularJs es un servicio.
Se utiliza para realizar un seguimiento de los cambios en propiedades específicas dentro de un ámbito determinado. Es similar a un detector de eventos. Los cambios se realizan en el valor de las variables especificadas.
Cuando registramos un reloj le pasamos dos funciones como parámetros a la función $watch(). Estas funciones son:
- Una función de valor
- Una función de oyente
Ejemplo:
$scope.$watch(function() {}, //value function
function() {} //listener function
);
Un observador puede cambiar en las respuestas en:
- Tiempos de espera
- interfaz de usuario
- Cálculos asincrónicos complejos realizados por trabajadores web
- llamadas ajax
Métodos utilizados: $scope.$watchGroup
$watchGroup() es un atajo para configurar observadores con la misma devolución de llamada, pasando una array de watchExpressions.
$scope.$watchGroup([‘obj.a’, ‘obj.b.bb[4]’, ‘letters[8]’], function(newValues, oldValues, scope) { //… });
$scope.$watchCollection es un atajo para observar arreglos u objetos. En las arrays, se llama al oyente cuando se reemplaza, elimina o agrega cualquiera de los elementos.
El reloj $realiza un seguimiento de la variable. Esta función toma dos argumentos:
nuevo valor
$scope.$watch(‘expression’, function (newvalue, oldvalue) { //parámetro de expresión //Código });
valor antiguo
$scope.$watch(function() {}, function (newvalue, oldvalue) { //Parámetro de función // Código });
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
</script>
</head>
<body ng-app="myNgApp">
<div ng-controller="myController">
Message: <input type="text"
ng-model="message" />
<br />
New Message: {{newMessage}} <br />
Old Message: {{oldMessage}}
</div>
<script>
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;
});
});
</script>
</body>
</html>
Producción
Otros:
$resumen()
Llamamos a la función $digest() cuando AngularJS cree que es necesario.
Por ejemplo, después de que se ejecuta un controlador de clic de botón, o después de que regresa una llamada AJAX.
$aplicar():
La función $scope.$apply() toma una función como parámetro que se ejecuta, y luego $scope.$digest() se llama internamente. Eso hace que sea útil que todos los relojes estén controlados.
$scope.$apply(function() {
$scope.data.myVar = "value";
});
Ejemplo de $Reloj:
html
<div class="container" data-ng-app="app">
<div class="well" data-ng-controller="FooCtrl">
<p><strong>Controller1</strong></p>
<div class="row">
<div class="col-sm-6">
<p><a href=""
ng-click=
"setItems([ { name: 'I am single item' } ])">
Send item one </a></p>
<p><a href=""
ng-click=
"setItems([ { name: 'Item 1 of 2' },
{ name: 'Item 2 of 2' } ])">
Send item two </a></p>
<p><a href=""
ng-click=
"setItems([ { name: 'Item 1 of 3' },
{ name: 'Item 2 of 3' },
{ name: 'Item 3 of 3' } ])">
Send item three </a></p>
</div>
<div class="col-sm-6">
<p><a href=""
ng-click="setName('Sheldon')">
Send name: Geeks</a></p>
<p><a href=""
ng-click="setName('Leonard')">
Send name: For</a></p>
<p><a href=""
ng-click="setName('Penny')">
Send name: Geeks</a></p>
</div>
</div>
</div>
<div class="well"
data-ng-controller="BarCtrl">
<p><strong>Controller2</strong></p>
<p ng-if="name">Name is: {{ name }}</p>
<div ng-repeat="item in items">
{{ item.name }}</div>
</div>
</div>
javascript
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:
css
.well {
margin-top: 10px;
margin-bottom: 10px;
}
p:last-child {
margin-bottom: 0;
}
Producción
Publicación traducida automáticamente
Artículo escrito por sharmaanushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA