AngularJS 1.5+-Komponenten unterstützen keine Beobachter. Worum geht es?

Das $watch-Objekt ist innerhalb des $scope-Objekts verfügbar. Sie müssen also $scope in der Controller-Werksfunktion hinzufügen und dann den Beobachter über die Variable stellen.

$scope.$watch(function(){
    return myBox.game;
}, function(newVal){
   alert('Value changed to '+ newVal)
});

Demo hier

Hinweis: Ich weiß, dass Sie directive in component konvertiert haben, um die Abhängigkeit von $scope zu entfernen, sodass Sie .__ einen Schritt näher kommen. Angular2. Aber es scheint, als ob es für diesen Fall nicht entfernt wurde . </ strike>

Update

Grundsätzlich wird bei Winkel 1.5 die .component-Methode hinzugefügt. Sie unterscheidet zwei verschiedene Funktionen. Wie component. Führt ein bestimmtes Verhalten das Hinzufügen von selector aus, wobei directive ein spezifisches Verhalten zu DOM hinzufügt. Direktive ist nur eine Wrapper-Methode für .directive DDO (Direktive Definitionsobjekt). Sie können lediglich die link/compile-Funktion entfernen, während Sie die .component-Methode verwenden, bei der Sie die Möglichkeit hatten, ein Winkel-kompiliertes DOM zu erhalten.

Verwenden Sie den $onChanges$doCheck Lebenszyklus-Hook des Angular-Komponenten-Lebenszyklus-Hooks, der nach der Version Angular 1.5.3+ verfügbar ist.

_/$ onChanges (changesObj) - Wird aufgerufen, wenn Bindungen aktualisiert werden. Die changesObj ist ein Hash, dessen Schlüssel die Namen der gebundenen Eigenschaften sind.

$ doCheck () - Wird bei jeder Änderung des Digest-Zyklus aufgerufen, wenn sich die Bindung ändert. Bietet die Möglichkeit, Änderungen zu erkennen und darauf zu reagieren.

Durch Verwendung derselben Funktion innerhalb der Komponente wird sichergestellt, dass Ihr Code kompatibel ist, um zu Angular 2 zu wechseln.

Für jeden, der an meiner Lösung interessiert ist, greife ich auf RXJS Observables zurück, die Sie verwenden müssen, wenn Sie zu Angular 2 gelangen. Hier ist eine funktionierende Geige für die Kommunikation zwischen Komponenten.

JS FIDDLE RXJS Observables

class BoxCtrl {
    constructor(msgService) {
    this.msgService = msgService
    this.msg = ''

    this.subscription = msgService.subscribe((obj) => {
      console.log('Subscribed')
      this.msg = obj
    })
    }

  unsubscribe() {
    console.log('Unsubscribed')
    msgService.usubscribe(this.subscription)
  }
}

var app = angular
  .module('app', ['ngMaterial'])
  .controller('MainCtrl', ($scope, msgService) => {
    $scope.name = "Observer App Example";
    $scope.msg = 'Message';
    $scope.broadcast = function() {
      msgService.broadcast($scope.msg);
    }
  })
  .component("box", {
    bindings: {},
    controller: 'BoxCtrl',
    template: `Listener: </br>
    <strong>{{$ctrl.msg}}</strong></br>
    <md-button ng-click='$ctrl.unsubscribe()' class='md-warn'>Unsubscribe A</md-button>`
  })
  .factory('msgService', ['$http', function($http) {
    var subject$ = new Rx.ReplaySubject();
    return {
      subscribe: function(subscription) {
        return subject$.subscribe(subscription);
      },
      usubscribe: function(subscription) {
        subscription.dispose();
      },
      broadcast: function(msg) {
        console.log('success');
        subject$.onNext(msg);
      }
    }
  }])

Ein kleines Heads-up bezüglich der Verwendung von ng-change, wie von der akzeptierten Antwort empfohlen, zusammen mit einer Winkelkomponente von 1,5.

Falls Sie eine Komponente überwachen müssen, die ng-model und ng-change nicht funktioniert, können Sie die Parameter wie folgt übergeben:

Markup in welcher Komponente verwendet wird:

<my-component on-change="$ctrl.doSth()"
              field-value="$ctrl.valueToWatch">
</my-component>

Komponente js:

angular
  .module('myComponent')
  .component('myComponent', {
    bindings: {
      onChange: '&',
      fieldValue: '='
    }
  });

Komponentenauszeichnung:

<select ng-model="$ctrl.fieldValue"
        ng-change="$ctrl.onChange()">
</select>

Ich bin spät dran. Aber es kann einem anderen Volk helfen.

app.component("headerComponent", {
    templateUrl: "templates/header/view.html",
    controller: ["$rootScope", function ($rootScope) {
        let $ctrl = this;
        $rootScope.$watch(() => {
            return $ctrl.val;
        }, function (newVal, oldVal) {
            // do something
        });
    }]
});

Verfügbar in IE11, MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver . Sie müssen $ element-Service in den Controller einspeisen, der die Trennung von DOM/Controller halbiert, aber ich glaube, dass dies eine grundlegende Ausnahme (dh ein Fehler) in anglejs ist. Da hide/show async ist, benötigen wir einen On-Show-Callback, der von anglejs und angle-bootstrap-tab nicht bereitgestellt wird. Außerdem müssen Sie wissen, welches spezifische DOM-Element Sie beobachten möchten. Ich habe folgenden Code für den anglejs-Controller verwendet, um die Anzeige des Highcharts-Diagramm-Reflow auszulösen.

const myObserver = new MutationObserver(function (mutations) {
    const isVisible = $element.is(':visible') // Requires jquery
    if (!_.isEqual(isVisible, $element._prevIsVisible)) { // Lodash
        if (isVisible) {
            $scope.$broadcast('onReflowChart')
        }
        $element._prevIsVisible = isVisible
    }
})
myObserver.observe($element[0], {
    attributes: true,
    attributeFilter: ['class']
})

Wirklich nett akzeptierte Antwort, aber ich kann hinzufügen, dass Sie auch die Kraft von Ereignissen verwenden können (ein bisschen wie in Qt-Signal/Slots, wenn Sie so wollen).

Ein Ereignis wird gesendet: $rootScope.$broadcast("clickRow", rowId)von einem übergeordneten Controller (oder sogar einem untergeordneten Controller) .__ Dann können Sie das Event in Ihrem Controller wie folgt behandeln: 

$scope.$on("clickRow", function(event, data){
    // do a refresh of the view with data == rowId
});

Sie können auch einige Protokolle dazu hinzufügen (hier entnommen: https://stackoverflow.com/a/34903433/3147071 )

var withLogEvent = true; // set to false to avoid events logs
app.config(function($provide) {
    if (withLogEvent)
    {
      $provide.decorator("$rootScope", function($delegate) {
        var Scope = $delegate.constructor;
        var origBroadcast = Scope.prototype.$broadcast;
        var origEmit = Scope.prototype.$emit;

        Scope.prototype.$broadcast = function() {
          console.log("$broadcast was called on $scope " + this.$id + " with arguments:",
                     arguments);
          return origBroadcast.apply(this, arguments);
        };
        Scope.prototype.$emit = function() {
          console.log("$emit was called on $scope " + this.$id + " with arguments:",
                     arguments);
          return origEmit.apply(this, arguments);
        };
        return $delegate;
      });
    }
});