Zugriff auf Controller-Bereich von der winkelabhängigen Komponentenausgabebindungsfunktion aus möglich

Question

Ich versuche, vom Dashboard component auf meinen Home-Controller-Bereich zuzugreifen, aber es ist nicht definiert.

Ich habe auch einen zweiten Ansatz versucht, aber dann ist meine Funktionsvariable nicht definiert.

I Angular 1.5 mit Typoskript

ersten Ansatz bin mit:

Heimsteuerung HTML:

<div class="home-container"> 
    <dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged"> 
    </dashboard-component> 
</div> 

Heimsteuerung js:

namespace app.dashboard { 
    'use strict'; 

    class HomeController { 
     static $inject:Array<string> = ['$window']; 

     constructor(private $window:ng.IWindowService) { 

     } 

     private onTileTypeChanged(tile:ITile) { 
      console.log(tile); // DEFINED AND WORKING 
      console.log(this); // NOT DEFINED 
     } 
    } 

    angular 
     .module('app.dashboard') 
     .controller('HomeController', HomeController); 
} 

Dashboard-Controller js:

angular.module('app.dashboard') 
    .component('dashboardComponent', { 
     templateUrl: 'app/dashboard/directives/dashboard-container.html', 
     controller: DashboardComponent, 
     controllerAs: 'DashboardCtrl', 
     bindings: { 
      onTileTypeChanged: "&" 
     } 
    }); 

this.onTileTypeChanged()(tile); 

Zweiter Ansatz:

Heimsteuerung HTML:

<div class="home-container"> 
    <dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged()"> 
    </dashboard-component> 
</div> 

Dashboard-Controller js:

this.onTileTypeChanged(tile); 

Und hier bin ich Das Gegenteil erreichen:

private onTileTypeChanged(tile:ITile) { 
    console.log(tile); // NOT DEFINED 
    console.log(this); // DEFINED AND WORKING 
} 

Answer 1

Sie verwenden Expressionsbindung.

Instanziieren der dashboard-component mit:

<dashboard-component on-tile-change="HomeCtrl.onTileChange($tile)"> 
</dashboard-component> 

im Component-Controller aufrufen, um die Funktion mit einheimischen:

this.onTileChange({$tile: tile}); 

angular.module('app.dashboard') 
    .component('dashboardComponent', { 
     templateUrl: 'app/dashboard/directives/dashboard-container.html', 
     controller: DashboardComponent, 
     controllerAs: 'DashboardCtrl', 
     bindings: { 
      onTileChange: "&" 
     } 
    })t 

um Ereignisdaten von einer Komponente zu einer übergeordneten Steuerung zu kommunizieren

Die Konvention für injizierte Einheimische ist es, sie mit Witz zu benennen h a $ Präfix, um sie von Variablen im übergeordneten Bereich zu unterscheiden.

Aus dem Text & Tabellen:

• & oder &attr - bietet eine Möglichkeit, einen Ausdruck im Kontext des übergeordneten Bereichs auszuführen. Wenn kein Attributname angegeben wird, wird angenommen, dass der Attributname mit dem lokalen Namen identisch ist. Bei <my-component my-attr="count = count + value"> und der Isolate-Bereichsdefinition scope: { localFn:'&myAttr' } zeigt die Isolate-Bereichseigenschaft localFn auf einen Funktionswrapper für den Ausdruck count = count + value. Oft ist es wünschenswert, Daten aus dem isolierten Bereich über einen Ausdruck an den übergeordneten Bereich zu übergeben. Dies kann durch Übergeben einer Zuordnung lokaler Variablennamen und -werte an den Ausdruckswrapper fn erfolgen.Beispiel: Wenn der Ausdruck increment($amount) lautet, können Sie den Betragswert angeben, indem Sie localFn als localFn({$amount: 22}) aufrufen.

- AngularJS Comprehensive Directive API Reference