Implementing a simple controller that utilizes a directive/component and passes a function as binding. However, when the function is called, there is no reference available to access any of the controller class services.
Within the "public onTileClicked" function in my controller, specifically, there is no access to the tileService.
This scenario can be observed in the following Controller 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);
}
The corresponding Controller html looks like this:
<div class="tiles-container">
<tile-component ng-repeat="tile in DashboardCtrl.tiles" tile="tile"
on-tile-clicked="DashboardCtrl.onTileClicked">
</tile-component>
</div>
In the Directive js file:
class TileComponent {
tile:ITile;
onTileClicked:Function;
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: "&"
}
});
Finally, the "onTileClicked" functionality in js:
DashboardController.prototype.onTileClicked = function (tile) {
var _this = this;
this.tileService.getTiles(tile.ID)
.then(function (tiles) {
_this.tiles = tiles;
});
};