¿Cómo ver las variables de servicio?

$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:

  1. Tiempos de espera
  2. interfaz de usuario
  3. Cálculos asincrónicos complejos realizados por trabajadores web
  4. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *