Pass .bind($ctrl) to md-on-reorder causes invinite digest

[scipper]

trafficstars

I have the the following reorder function in my controller class (ES2015):

class MyController {
    constructor() {
        this.newOrder = 'name';
    }

    onReorder(order) {
        this.newOrder = order;
    }
}

And I referenced the onReorder function like this:

<table md-table> <thead md-head md-order="$ctrl.newOrder" md-on-reorder="$ctrl.onReorder.bind($ctrl)">

Without .bind($ctrl) the context is obviously undefined. But passing .bind($ctrl) I receive the error:

vendor.js:56763 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

How can I properly pass the context of my controller to the onReorder function?

The answer from @daniel-nagy in changed how the onPaginate callback fn is bound seems kinda bad practice to me.

[daniel-nagy]

Don't use bind in your template, use it in your constructor.

class MyController {
    constructor() {
        this.newOrder = 'name';
        this.onReorder = this.onReorder.bind(this);
    }

    onReorder(order) {
        this.newOrder = order;
    }
}

I think using bind is forbidden in angular expressions becuase it creates a new function,

You can't declare functions or create regular expressions from within AngularJS expressions.

Also binding the method in the constructor will be more efficient.

[scipper]

This approach looks a bit better to me.

I did not know that .bind() returns a new function. Using thing technic on filters like

| filter: $ctrl.filterFunc.bind($ctrl)

works.