$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的更多相关文章

  1. angularjs中$parse的用法

    转载自:https://umur.blog/2014/02/25/advanced-angular-parse/ 高级Angular:$ parse 如果你想加强你的AngularJS知识,$ par ...

  2. angularjs 中 Factory,Service,Provider 之间的区别

    本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...

  3. AngularJS(4)-服务(Service)

    1.$location服务 $location 服务,它可以返回当前页面的 URL 地址 2.$http服务 $http 是 AngularJS 应用中最常用的服务. 服务向服务器发送请求,应用响应服 ...

  4. AngularJs创建自定义Service

    AngularJs可以创建自定义的service.下面的自定义service实现一个double倍数的服务: 参考下面语法: app.service('double', function () { t ...

  5. angularjs中factory, service和provider

    在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除.而controllers在不需要的时候就会被销毁了(因为service的底 ...

  6. 浅谈AngularJS的$parse服务

    $parse 作用:将一个AngularJS表达式转换成一个函数 Usage$parse(expression) arguments expression:需要被编译的AngularJS语句 retu ...

  7. AngularJS Injector和Service的工作机制

    要了解angularJS里的injector和Service是如何工作的,需要阅读/src/auto/injector.js.另外要结合/src/loader.js才能明白它的应用场景. auto/i ...

  8. angularjs 中使用 service 在controller 之间 share 对象和数据

    在做angularjs 的UI 时,我们经常会遇到一个页面之间有几个controller,在controller 之间share 公共的一些数据和方法就变得比较困难,目前推荐的做法是创建一个servi ...

  9. AngularJS中使用service,并同步数据

    service是单例对象,在应用中不同代码块之间共享数据. 对一些公用的方法封装到service中,然后通过依赖注入在Controller中调用,示例代码: 1.创建一个模块: var module ...

随机推荐

  1. TSQL Challenge 2

    和之前发布的TSQL Challenge 1是同一系列的文章,看到那篇学习哪篇,没有固定的顺序,只为锻炼下思维. Compare rows in the same table and group th ...

  2. MSChart使用之双Y轴使用

    protected void SearchChart() { Chart1.ChartAreas.Clear(); Chart1.Series.Clear(); ChartArea _ChartAre ...

  3. 【CEOI2004】锯木厂选址

    [题目描述] 从山顶上到山底下沿着一条直线种植了n棵老树.当地的政府决定把他们砍下来.为了不浪费任何一棵木材,树被砍倒后要运送到锯木厂.木材只能按照一个方向运输:朝山下运.山脚下有一个锯木厂.另外两个 ...

  4. openstack nova数据库计算结点IP地址

    最近遇到一个问题就是在控制结点上查找nova数据库中 select * from compute_nodes\G;中出现IP地址一直是127.0.0.1不是计算结点的IP,就算修改成计算结点的IP,也 ...

  5. MYSQL主从不同步延迟原理

    1. MySQL数据库主从同步延迟原理.   要说延时原理,得从mysql的数据库主从复制原理说起,mysql的主从复制都是单线程的操作,   主库对所有DDL和DML产生binlog,binlog是 ...

  6. Ajax的原理和运行机制

    关于ajax,是最近炒得非常火的一种技术,并且时下它也是非常流行.当然,它并不是什么新技术,而是在各种已有的技术和支持机制下的一个统一.在我的项目中,偶尔也会用到ajax,用来给用户一些无刷新的体验. ...

  7. php 4.X与5.x版本构造函数区别与类的继承

    今天看ecshop源码的时候发现 构造函数是和类名一样,以前没接触过,一下子疑惑啦 HP4.x 版本: PHP 4.x 的构造函数名与类名相同.        注意:在子类里父类的构造函数不会自动执行 ...

  8. Yii 框架里数据库操作详解

    增:1 第一种 $post=new Post; $post->title='sample post'; $post->content='content for the sample pos ...

  9. python使用platform模块获取系统环境并去除换行符

    近来在porting一个网站,企图拿到这个网站的数据来做分析.为了支持多系统环境的正常运行.需要知道当前系统环境的是什么OS? 1.python内置platform库.可以很方便得到当前系统环境时什么 ...

  10. 简单选择排序(Simple Selection Sort)的C语言实现

    简单选择排序(Simple Selection Sort)的核心思想是每次选择无序序列最小的数放在有序序列最后 演示实例: C语言实现(编译器Dev-c++5.4.0,源代码后缀.cpp) 原创文章, ...