[AngularJS] Using $parse Service

$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
    }