Ändern der übergeordneten Controller-Eigenschaft aus dem Kind-Status in uiRouter

Question

Ich Refactoring eine Angular 1.5-Anwendung und ich versuche, ein Problem durcharbeiten, ohne die gesamte Anwendung auseinander zu nehmen.

Mein Problem ist das; Ich habe einen übergeordneten Statuscontroller mit einer Eigenschaft. Eine untergeordnete Statusvorlage enthält eine Komponente, die die Eigenschaft im übergeordneten Status aktualisieren muss.

Meine Zustände sind wie so ein:

$stateProvider 
    .state('parent', { 
    abstract: true, 
    component: 'parentComponent' 
    }) 
    .state('parent.child', { 
    url: '/child', 
    component: 'childComponent' 
    }) 

Das Kind Komponente eine Vorlage enthält seine eigene Komponente hat, die eine Controller-Methode als Callback gibt:

<grand-child on-change="$ctrl.doSomething()"></grand-child> 

Ich möchte, dass Rückruf Ändern Sie eine Eigenschaft auf dem übergeordneten Controller.

Ich könnte etwas wie inject $ scope im übergeordneten Controller machen, dann die Eigenschaft zum scope-Objekt hinzufügen und die Vererbung des Bereichs verwenden, um die Eigenschaft vom child zu ändern, aber ich versuche $ scope aus dem Projekt zu entfernen, füge nicht mehr hinzu. Gibt es eine andere Möglichkeit, den übergeordneten Controller zu aktualisieren?

Answer 1

In einem solchen gekettet senario,

Ich würde Ihnen empfehlen, die Unterkunft in einem Dienst zu speichern

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .service('MyService', MyService); 

    MyService.$inject = []; 

    /* @ngInject */ 
    function MyService() { 



     this.myProperty = ''; // some default value if exists 
    } 
})(); 

In Ihrem Enkelkind Komponente des Controllers injizieren MyService dann

doSomething() { 

    this.MyService.myProperty = 'some new value'; 
} 

In Der Controller der übergeordneten Komponente injizieren MyService dann

$onInit() { 

    this.myProperty = this.MyService.myProperty; 
}