角度コンポーネントの出力バインディング機能からコントローラスコープにアクセスできない

Question

ダッシュボードcomponentからホームコントローラのスコープにアクセスしようとしていますが、未定義です。

私はもう一度アプローチを試みましたが、私の関数変数は未定義です。私は活字体

最初のアプローチで角度1.5を使用してい

：

ホームコントローラのHTML：

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

ホームコントローラ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); 
} 

ダッシュボードコントローラJS：

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

this.onTileTypeChanged()(tile); 

第二のアプローチ：

ホームコントローラのHTML：

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

ダッシュボードコントローラJS：

this.onTileTypeChanged(tile); 

そして、ここで私よ

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

Answer 1

あなたは式バインディングを使用しています。親コントローラにコンポーネントからイベントデータを通信する

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

：

インスタンス化dashboard-component有する：

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

コンポーネントコントローラで地元の人々との関数を呼び出す：

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

注射された地元住民のための慣例は、 h $という接頭辞を付けて、親スコープの変数と区別します。ドキュメントから

：

• &または&attr - は親スコープのコンテキスト内での発現を実行するための方法を提供します。 attr名が指定されていない場合、属性名はローカル名と同じであるとみなされます。 <my-component my-attr="count = count + value">と分離スコープ定義scope: { localFn:'&myAttr' }が指定されている場合、分離スコーププロパティlocalFnはcount = count + value式の関数ラッパーを指します。分離されたスコープから式を介して親スコープにデータを渡すことが望ましい場合がよくあります。これは、ローカル変数名と値のマップを式ラッパーfnに渡すことで実行できます。たとえば、式がincrement($amount)の場合、localFnをlocalFn({$amount: 22})と呼ぶことで金額を指定できます。

からAngularJS Comprehensive Directive API Reference