Açısal bileşen çıkış bağlama işlevinden denetleyici kapsamına erişilemiyor

Question

Ev denetleyici kapsamıma component gösterge tablosundan erişmeye çalışıyorum ancak tanımlanmamış.

Ayrıca ikinci bir yaklaşım denedim ama sonra işlev değişkeni tanımsız. Ben typescript

İLK YAKLAŞIM ile Açısal 1.5 kullanıyorum

:

Ana kontrolör HTML:

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

Ana kontrolör 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); 
} 

Pano denetleyici js:

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

this.onTileTypeChanged()(tile); 

İKİNCİ YAKLAŞIM:

Ana kontrolör HTML:

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

Pano denetleyici js: Burada ben

this.onTileTypeChanged(tile); 

VeSen bağlayıcı ifadesini kullanan

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

Answer 1

: tersini alma.

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

bir ana kontrol birimine bir bileşenden etkinlik verilerini iletmek için:

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

: halk ile fonksiyonu çağırmak bileşen denetleyicisi

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

:

örneğini dashboard-component ile

Enjekte yerliler için kongre, Ana kapsamdaki değişkenlerden ayırt etmek için $ önekini kullanın. Dokümanlar kaynaktan

:

• & veya &attr - üst etki bağlamında bir ifade gerçekleştirmek için bir yol sağlar. Attr adı belirtilmemişse, özellik adının yerel adla aynı olduğu varsayılır. <my-component my-attr="count = count + value"> ve izolat kapsam tanımı scope: { localFn:'&myAttr' } verildiğinde, izolat kapsam özelliği localFn, count = count + value ifadesi için bir işlev sarıcısına işaret edecektir. Çoğu zaman, verilerin bir kapsama aracılığıyla üst çerçeveye kadar izole kapsamından geçirilmesi arzu edilir. Bu, yerel değişken adlarının ve değerlerinin bir haritasının ifade sargısına fn geçirilmesiyle yapılabilir.Örneğin, ifade increment($amount) ise, 'u localFn({$amount: 22}) olarak arayarak miktar değerini belirtebiliriz.

- AngularJS Comprehensive Directive API Reference