Wie können Sie die Daten einer untergeordneten Komponente überwachen, die nicht von einer übergeordneten Komponente stammt (Angularjs 1.5 oder 1.6)?

Question

In dem folgenden Codes:

var app = angular.module('app', []) 
    // navigation template 
app.component('onChanges', { 
     bindings: { 
     name: '<' 
     }, 
     template: '<h1>{{$ctrl.greeting}}</h1><br><h2>{{origin}}</h2> ', 
     controller: function($scope) { 
     $scope.origin = 'international'; 
     this.$onChanges = function(obj) { 
      if (obj.name && this.name) { 
      var prefix; 
      (obj.name.currentValue.toLowerCase() === 'thomas') ? 
      prefix = 'Howdy ': prefix = 'Hello '; 
      this.greeting = prefix + this.name; 
      (prefix === 'Hello ' || !prefix) ? $scope.origin = 'american': $scope.origin = 'australian'; 
      } 

      // if the name is undefined clear greeting 

      if (!this.name) { 
      this.greeting = '' 
      } 
     }; 

     $scope.$watch('$scope.origin', function() { 
      console.log("I am here"); 
     }) 

     } 
     }); 

Geändert Beitrag: Ich benutze $ scope $ Uhr die Änderung von scope.origin $ zu überwachen.. Was habe ich falsch gemacht? Bitte versuchen Sie diese Plunker: https://plnkr.co/edit/DDZeTHQIji4FJnyhpQAJ?p=preview

Original-Beitrag: Mein Problem ist ein häufiges Problem für diejenigen ist Angular 1.5 oder 1.6-Komponenten verwenden, aber überraschend, kann ich nicht eine SO Frage/Antwort in Bezug auf diese finden.

In diesem Fall sind $ ctrl.origin keine Daten von der übergeordneten Komponente, während $ ctrl.name von der übergeordneten Komponente an die untergeordnete Komponente übergeben wird.

Nach meinem Verständnis: $ onChanges Funktion kann nur $ ctrl.name - Daten aus einer externen Quelle z. B. Mutterkomponente in die Komponente kommen.

Meine Frage: Wie beobachte ich die Änderung von lokalen Daten einer Komponente wie $ ctrl.origin - Daten nicht von einer übergeordneten Komponente übergeben? Ein Beispiel könnte nützlich sein.

Bitte teilen Sie Ihre Gedanken, wie es geht.

Hier ist meine Plunker: https://plnkr.co/edit/DDZeTHQIji4FJnyhpQAJ?p=info

Answer 1

unter Angabe der AngularJS:

$onChanges(changesObj) - Called whenever one-way bindings are updated. The 
changesObj is a hash whose keys are the names of the bound properties that 
have changed, and the values are an object of the form { currentValue, 
previousValue, isFirstChange() }. Use this hook to trigger updates within 
a component such as cloning the bound value to prevent accidental mutation 
of the outer value. 

Also zuerst Ihre Bindungen sind Einweg- und die Bindungen existieren stellen Sie sicher, (Ihr nicht in diesem Fall, so $ onChanges wird nicht funktionieren).

Wie für Variablen aus anderen Bereichen zu beobachten, ich glaube $ Uhr fähig ist:

$scope.$watch(
() => { // Old variable value; }, 
    '$ctrl.origin' => { 
    console.log('something changed on variable', variable-name, 'blah'); 
    } 
);