码迷,mamicode.com
首页 > Web开发 > 详细

[AngularJS] Using $parse Service

时间:2016-04-19 17:31:33      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:

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

 

[AngularJS] Using $parse Service

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5408647.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!