使用打字稿从回调中获取控制器引用

Question

我有以下简单的控制器，它使用 directive/component 并传递一个函数作为绑定。

调用函数时，我没有参考使用任何控制器 class 服务。

在这种情况下，在我的控制器 public onTileClicked 函数中，我无权访问 tileService

控制器 js:

namespace app.dashboard {
    'use strict';

    export class DashboardController {
        static $inject:Array<string> = ['$q', 'logger', 'tileService'];

        constructor(private $q:ng.IQService,
                    private tileService:TileService) {
        }

        public tiles:Array<ITile> = [];

        public onTileClicked(tile:ITile) {                
            this.tileService.getTiles(tile.ID) // No access to tileService
                .then((data)=> {
                    this.tiles = data; // Won't have access to this.tiles
                })
        }
    }

    angular
        .module('app.dashboard')
        .controller('DashboardController', DashboardController);
}

控制器html:

<div class="tiles-container">
    <tile-component ng-repeat="tile in DashboardCtrl.tiles" tile="tile"
                    on-tile-clicked="DashboardCtrl.onTileClicked">
    </tile-component>
</div>

指令 js:

class TileComponent {
    tile:ITile;
    onTileClicked:Function;

    /* @ngInject */
    constructor() {
    }

    tileClicked() {
        this.onTileClicked()(this.tile);
    }
}

angular.module('app.dashboard')
.component('tileComponent', {
    templateUrl: 'app/dashboard/directives/tile.html',
    controller: TileComponent,
    controllerAs: 'tileCtrl',
    bindings: {
        tile: '<',
        onTileClicked: "&"
    }
});

onTileClicked js:

DashboardController.prototype.onTileClicked = function (tile) {
    var _this = this;
    this.tileService.getTiles(tile.ID)
        .then(function (tiles) {
        _this.tiles = tiles;
    });
};

Answer 1

您对函数的绑定（在 html 中）是错误的。你漏掉了括号 :

<tile-component ng-repeat="tile in DashboardCtrl.tiles" tile="tile"
                on-tile-clicked="DashboardCtrl.onTileClicked()"> <!-- HERE -->
</tile-component>

使用打字稿从回调中获取控制器引用

Get controller reference from callback using typescript

javascript

angularjs

typescript

angularjs-directive

angularjs-components