Impossibile accedere allo scope del controller dalla funzione di associazione dell'uscita del componente angolare

Question

Sto provando ad accedere al mio ambito del controller di casa dalla dashboard component ma non è definito.

Ho anche provato un secondo approccio ma poi la mia variabile di funzione non è definita.

sto usando angolare 1.5 con tipografico

primo approccio:

regolatore casa HTML:

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

JS regolatore casa:

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 js controllore:

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

this.onTileTypeChanged()(tile); 

secondo approccio:

regolatore casa HTML: regolatore

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

Dashboard JS:

this.onTileTypeChanged(tile); 

E qui io sonoottenere il contrario:

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

Answer 1

Si sta utilizzando il binding di espressioni.

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

Per comunicare dati di eventi da un componente a un controller principale:

istanziare il dashboard-component con:

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

Nel regolatore componente richiamare la funzione con i locali:

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

La convenzione per gli abitanti locali è di nominarli h un prefisso $ per differenziarli dalle variabili sull'ambito principale.

dalla documentazione:

• & o &attr - fornisce un modo per eseguire un'espressione nel contesto del campo di applicazione genitore. Se non viene specificato alcun nome attr, si assume che il nome dell'attributo sia lo stesso del nome locale. Dato <my-component my-attr="count = count + value"> e la definizione dell'ambito isolato scope: { localFn:'&myAttr' }, la proprietà dell'ambito di isolamento localFn punterà a un wrapper di funzione per l'espressione count = count + value. Spesso è desiderabile passare i dati dall'ambito isolato tramite un'espressione all'ambito principale. Questo può essere fatto passando una mappa di nomi e valori di variabili locali nel wrapper espressione fn.Ad esempio, se l'espressione è increment($amount), è possibile specificare il valore dell'importo chiamando lo localFn come localFn({$amount: 22}).

- AngularJS Comprehensive Directive API Reference