Невозможно получить доступ к области контроллера из angular функции связывания выходных данных компонента

Я пытаюсь получить доступ к области моего домашнего контроллера с панели component, но она undefined.

Я также попробовал второй подход, но тогда моя функциональная переменная undefined.

Я использую Angular 1.5 с Typescript

ПЕРВЫЙ ПОДХОД:

Домашний контроллер 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
}

Ответы

Ответ 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});

Соглашение для инклинированных локалей должно называть их префиксом $, чтобы отличать их от переменных в родительской области.

Из Документов:

  • & или &attr - обеспечивает способ выполнения выражения в контексте родительской области. Если имя attr не указано, предполагается, что имя атрибута совпадает с локальным именем. Учитывая <my-component my-attr="count = count + value"> и определение области выделения scope: { localFn:'&myAttr' }, свойство scope изоляции localFn будет указывать на оболочку функции для выражения count = count + value. Часто желательно передавать данные из изолированной области видимости через выражение в родительскую область. Это можно сделать, передав карту локальных имен переменных и значений в оболочку выражения fn. Например, если выражение increment($amount), то мы можем указать значение суммы, вызывая localFn как localFn({$amount: 22}).

- Справочник по API полной версии AngularJS