Los componentes de AngularJS 1.5+ no son compatibles con Watchers, ¿cuál es la solución?

Componentes de escritura sin observadores

Esta respuesta describe cinco técnicas que se pueden utilizar para escribir componentes de AngularJS 1.5 sin utilizar observadores.

• Utilice la ng-changedirectiva
• Utilice el $onChangesgancho del ciclo de vida
• Utilice el $doCheckgancho del ciclo de vida
• Comunicación intercomponente con require
• Insertar valores desde un servicio con RxJS

Utilice la ng-changedirectiva

¿Qué métodos alternativos están disponibles para observar los cambios de estado de obj sin usar watch en preparación para AngularJs2?

Puede utilizar la ng-changedirectiva para reaccionar a los cambios de entrada.

<textarea ng-model='game.game' 
          ng-change="game.textChange(game.game)">
</textarea>

Y para propagar el evento a un componente principal, el controlador de eventos debe agregarse como un atributo del componente secundario.

<game game='myBox.game' game-change='myBox.gameChange($value)'></game>

js

app.component("game",  {
      bindings: {game:'=',
                 gameChange: '&'},
      controller: function() {
        var game = this;
        game.textChange = function (value) {
            game.gameChange({$value: value});
        });

      },
      controllerAs: 'game',
      templateUrl: "/template2"
});

Y en el componente principal:

myBox.gameChange = function(newValue) {
    console.log(newValue);
});

Este es el método preferido en el futuro. La estrategia de uso de AngularJS $watchno es escalable porque es una estrategia de sondeo. Cuando el número de $watchoyentes llega a alrededor de 2000, la interfaz de usuario se vuelve lenta. La estrategia en Angular 2 es hacer que el marco sea más reactivo y evitar $watchcolocarlo $scope.

Utilice el $onChangesgancho del ciclo de vida

Con la versión 1.5.3 , AngularJS agregó el $onChangesenlace de ciclo de vida al $compileservicio.

De los documentos:

El controlador puede proporcionar los siguientes métodos que actúan como enlaces del ciclo de vida:

• $onChanges(changesObj): se llama cada vez que se actualizan enlaces unidireccionales ( <) o de interpolación ( ). @Es changesObjun hash cuyas claves son los nombres de las propiedades vinculadas que han cambiado y los valores son un objeto de la forma { currentValue: ..., previousValue: ... }. Utilice este enlace para activar actualizaciones dentro de un componente, como clonar el valor vinculado para evitar la mutación accidental del valor externo.

— Referencia API de directiva integral de AngularJS: enlaces de ciclo de vida

El $onChangesgancho se utiliza para reaccionar a cambios externos en el componente con <fijaciones unidireccionales. La ng-changedirectiva se utiliza para propagar cambios desde el ng-modelcontrolador fuera del componente con &enlaces.

Utilice el $doCheckgancho del ciclo de vida

Con la versión 1.5.8 , AngularJS agregó el $doCheckenlace de ciclo de vida al $compileservicio.

De los documentos:

El controlador puede proporcionar los siguientes métodos que actúan como enlaces del ciclo de vida:

• $doCheck()- Se llama en cada turno del ciclo de resumen. Brinda la oportunidad de detectar y actuar sobre los cambios. Cualquier acción que desee realizar en respuesta a los cambios que detecte debe invocarse desde este enlace; implementar esto no tiene ningún efecto sobre cuándo $onChangesse llama. Por ejemplo, este gancho podría ser útil si desea realizar una verificación de igualdad profunda o verificar un objeto Fecha cuyos cambios no serían detectados por el detector de cambios de Angular y, por lo tanto, no se activarían $onChanges. Este gancho se invoca sin argumentos; Si detecta cambios, debe almacenar los valores anteriores para compararlos con los valores actuales.

— Referencia API de directiva integral de AngularJS: enlaces de ciclo de vida

Comunicación intercomponente conrequire

Las directivas pueden exigir que los controladores de otras directivas permitan la comunicación entre sí. Esto se puede lograr en un componente proporcionando una asignación de objetos para la propiedad requerida . Las claves de objeto especifican los nombres de propiedad bajo los cuales los controladores requeridos (valores de objeto) se vincularán al controlador del componente requerido.

app.component('myPane', {
  transclude: true,
  require: {
    tabsCtrl: '^myTabs'
  },
  bindings: {
    title: '@'
  },
  controller: function() {
    this.$onInit = function() {
      this.tabsCtrl.addPane(this);
      console.log(this);
    };
  },
  templateUrl: 'my-pane.html'
});

Para obtener más información, consulte la Guía para desarrolladores de AngularJS: comunicación entre componentes

Insertar valores desde un servicio con RxJS

¿Qué pasa en una situación en la que tienes un Servicio que mantiene el estado, por ejemplo? ¿Cómo podría impulsar cambios en ese Servicio y que otros componentes aleatorios de la página estén al tanto de dicho cambio? He estado luchando para abordar este problema últimamente.

Cree un servicio con extensiones RxJS para Angular .

<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/rx/dist/rx.all.js"></script>
<script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>

var app = angular.module('myApp', ['rx']);

app.factory("DataService", function(rx) {
  var subject = new rx.Subject(); 
  var data = "Initial";

  return {
      set: function set(d){
        data = d;
        subject.onNext(d);
      },
      get: function get() {
        return data;
      },
      subscribe: function (o) {
         return subject.subscribe(o);
      }
  };
});

Entonces simplemente suscríbete a los cambios.

app.controller('displayCtrl', function(DataService) {
  var $ctrl = this;

  $ctrl.data = DataService.get();
  var subscription = DataService.subscribe(function onNext(d) {
      $ctrl.data = d;
  });

  this.$onDestroy = function() {
      subscription.dispose();
  };
});

Los clientes pueden suscribirse a los cambios DataService.subscribey los productores pueden impulsar los cambios con DataService.set.

La DEMOSTRACIÓN de PLNKR .

Feb 21 '2016 11:02 georgeawg