$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. jquery val() and text().

    .val() works on input elements (or any element with a value attribute?) and .text() will not work on ...

  2. 高级I/O函数(3)-tee、fcntl函数

    tee函数使用 功能描述:tee函数在两个管道文件描述符之间复制数据,也是零拷贝操作.它不消耗数据,因此源文件描述符仍然可以用于后续的操作. 函数原型: #include <fcntl.h> ...

  3. 最短路径算法——Dijkstra,Bellman-Ford,Floyd-Warshall,Johnson

    根据DSqiu的blog整理出来 :http://dsqiu.iteye.com/blog/1689163 PS:模板是自己写的,如有错误欢迎指出~ 本文内容框架: §1 Dijkstra算法 §2 ...

  4. 16 3Sum Closest(输出距离target最近的三个数的和Medium)

    题目意思:给一个数组,给一个target,找三个数的和,这个和要与target距离最近,输出这个和 思路:这个题比3sum要稍微简单一点,如果需要优化,也可以去重,不过因为结果唯一,我没有去重. mi ...

  5. Thinkphp 验证码、文件上传

    一.验证码 验证码参数 例题:登录时验证下验证码 LoginController.class.php <?php namespace Home\Controller; use Think\Con ...

  6. Linux 下安装Python框架django建立与mysql的连接

    0.基本环境说明: a. Ubuntu 14.04 64bit b. python 2.7.6 c. django 1.8 d. django-registration e. django-widge ...

  7. [转载]在 Windows 10 中, 如何卸载和重新安装 OneNote App

    在 Windows 10 中, 如何卸载和重新安装 OneNote App 15/8/2015 使用 PowerShell 命令卸载 OneNote App 开始菜单 -> 输入 "P ...

  8. Xcode 快捷键-b

    0.跳到指定行command + L; 1.配置高亮方案:Fonts & Colors 2.键盘快捷键:Key Bindings 3.代码缩进:Re-indent selection.(快捷键 ...

  9. keil优化等级设置

    附表:Keil C51中的优化级别及优化作用 级别说明 0 常数合并:编译器预先计算结果,尽可能用常数代替表达式.包括运行地址计算. 优化简单访问:编译器优化访问8051系统的内部数据和位地址. 跳转 ...

  10. 【转】(DT系列一)DTS结构及其编译方法----不错

    原文网址:http://www.cnblogs.com/biglucky/p/4057476.html DTS结构及其编译方法 一:主要问题 1,需要了解dtsi与dts的关系 2,dts的结构模型 ...