Struggling with the binding of a function to 'this' in my typescript and angular project. It's important to note that the controller and $scope are distinct entities in this scenario.
Tried using angular.bind(this, this.filterViewedStagingItems); without success. Resorting to an inlined function for now, which feels like a less than ideal workaround.
Html:
<div class="table-entry row table-entry stagingItem" ng-repeat="stagingItem in stagingItems|filter:vm.filterViewedStagingItems">
Code:
export interface IFooController extends ng.IScope {
vm: Controller;
isNewForSupplier:boolean;
isNewForRestaurant:boolean;
isPackSizeDescChanged:boolean;
isDescChanged:boolean;
}
export class Controller{
public static $inject = [
'$scope',
'$rootScope',
'$routeParams'
];
constructor(private $scope:IFooController,
$rootScope: ng.IScope,
private $routeParams:any)
{
$scope.vm = this;
angular.bind(this, this.filterViewedStagingItems);//Doesn't work
}
private filterViewedStagingItems(stagingItem: StagingItem): boolean
{
if (this.$scope.isNewForRestaurant && stagingItem.isNewForRestaurantOnly())
{
return true;
}
if (this.$scope.isNewForSupplier && stagingItem.isNewItemOnly())
{
return true;
}
if (this.$scope.isDescChanged && stagingItem.isDescriptionChangedOnly())
{
return true;
}
if (this.$scope.isPackSizeDescChanged && stagingItem.isPackSizeChangedOnly())
{
return true;
}
if (this.$scope.isPackSizeDescChanged && this.$scope.isDescChanged && stagingItem.isDescriptionOrPackSizeDescChangedOnly())
{
return true;
}
if (this.areAnyFiltersEnabled()) {
return false;
}
return true;
}
private areAnyFiltersEnabled():boolean
{
return this.$scope.isNewForRestaurant || this.$scope.isNewForSupplier || this.$scope.isDescChanged || this.$scope.isPackSizeDescChanged
}
}