$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 }
时间: 2024-09-30 13:04:10