$parse is useful when you want to parse an expression and the context is not defined yet.
For example, I have a table component which allows user to pass in all the row items and define action for each row.
<ttmd-table
items="vm.invoices"
headers="vm.headers"
>
<ttmd-actions>
<ttmd-action
if="shouldPay"
text="pay"
on-click="vm.pay(payload)"
></ttmd-action>
</ttmd-actions>
</ttmd-table>
What I want is only if 'shouldPay' is true when display the `ttmd-action`, if not just hide it, so there is "if" attr in the tag.
But there is one problem to make it works: Because `shouldPay` prop locates on each item, if we use ng-repeat, we would do somthing like this:
<div ng-repeat="item in items track by $index">
<ttmd-action
if="item.shouldPay"
></ttmd-action>
</div
But I don't want to make component hard for user to use, so the problem we need to solve here is
- parse the expression we passed in with the right context
So here is $parse come into play:
shouldDisplay(){ let getter = this.$parse(this.if); // get the expression and conver it to a function
let context = this.ItemCtrl.getSelectedItem(); // Find the right context
console.log(context);
console.log(getter(context));
return getter(context); // parse the expression with the right context
}