I have the following simple controller which using a directive/component and passing a function as binding.
When the function being called I don't have reference to use any of the controller class services.
In this case in my controller public onTileClicked
function I don't have access to tileService
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);
}
Controller html:
<div class="tiles-container">
<tile-component ng-repeat="tile in DashboardCtrl.tiles" tile="tile"
on-tile-clicked="DashboardCtrl.onTileClicked">
</tile-component>
</div>
Directive 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;
});
};
Your binding (in html) to the function is wrong. You missed the parenthesis :
<tile-component ng-repeat="tile in DashboardCtrl.tiles" tile="tile"
on-tile-clicked="DashboardCtrl.onTileClicked()"> <!-- HERE -->
</tile-component>