Seeking to delegate my table with filtering and sorting functions as a directive. To incorporate two-way data binding, I have implemented the following:
public bindToController = {
cars: "="
};
This setup is necessary because when a car in the table is clicked, a property of that car is modified, requiring the controller where the cars data originates from to be notified.
export class CarsTableDirectiveController implements ng.IComponentController {
public cars;
public $onInit() {
console.log(this.cars);
}
constructor() {
console.log(this.cars);
}
}
export class CarsTable implements ng.IDirective {
public restrict: string = "E";
public scope = {};
public controller = CarsTableDirectiveController;
public controllerAs: string = '$ctrl';
public bindToController = {
cars: "="
};
static instance(): ng.IDirective {
return new CarsTable();
}
template: string = require<string>('./cars-table.html');
}
To implement this, I call it like so:
<projects-table cars="ctrl.cars"></projects-table>
Although the car data appears in the table, the cars variable is always undefined when logged.
What could be causing this issue? How can I establish effective two-way data binding for the cars object and utilize the variable cars within CarsTableDirectiveController?