Nie można uzyskać dostępu do zakresu kontrolera z funkcji wiązania wyjścia komponentu kątowego

Question

Próbuję uzyskać dostęp do zakresu kontrolera macierzystego z pulpitu nawigacyjnego component, ale jest on niezdefiniowany.

Próbowałem również drugie podejście, ale wtedy moja funkcja zmienna jest niezdefiniowana.

Używam kątowe 1.5 z maszynopis

Pierwsze podejście:

kontroler Home HTML:

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

regulatora Początek 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); 
} 

Kokpit kontroler JS:

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

this.onTileTypeChanged()(tile); 

Drugie podejście:

kontroler Home HTML:

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

Kokpit kontroler JS:

this.onTileTypeChanged(tile); 

I tu jestem przeciwnie:

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

Answer 1

Używasz wiązania do wyrażenia.

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

do przekazywania danych o zdarzeniach od składnika do kontrolera macierzystego:

instancję dashboard-component z:

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

w kontrolerze składnika wywołania funkcji z miejscowych:

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

Konwencja dla zatrutych mieszkańców polega na nazwaniu ich h prefiks $, aby odróżnić je od zmiennych w zakresie nadrzędnym.

Od docs:

• & lub &attr - zapewnia sposób wykonywania wyrażenie w kontekście zakresu nadrzędnego. Jeśli nie podano żadnej nazwy attr, przyjmuje się, że nazwa atrybutu jest taka sama, jak nazwa lokalna. Biorąc pod uwagę <my-component my-attr="count = count + value"> i definicję zakresu izolatu scope: { localFn:'&myAttr' }, właściwość zakresu izolatu localFn wskazuje na owijkę funkcji dla wyrażenia count = count + value. Często pożądane jest przekazywanie danych z izolowanego zakresu poprzez wyrażenie do zakresu nadrzędnego. Można to zrobić, przekazując mapę lokalnych nazw zmiennych i wartości do opakowania wyrażeń fn.Na przykład, jeśli wyrażenie ma postać increment($amount), możemy określić wartość kwoty, wywołując localFn jako.

- AngularJS Comprehensive Directive API Reference