[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
}
[AngularJS] Using $parse Service的更多相关文章
- angularjs中$parse的用法
转载自:https://umur.blog/2014/02/25/advanced-angular-parse/ 高级Angular:$ parse 如果你想加强你的AngularJS知识,$ par ...
- angularjs 中 Factory,Service,Provider 之间的区别
本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...
- AngularJS(4)-服务(Service)
1.$location服务 $location 服务,它可以返回当前页面的 URL 地址 2.$http服务 $http 是 AngularJS 应用中最常用的服务. 服务向服务器发送请求,应用响应服 ...
- AngularJs创建自定义Service
AngularJs可以创建自定义的service.下面的自定义service实现一个double倍数的服务: 参考下面语法: app.service('double', function () { t ...
- angularjs中factory, service和provider
在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除.而controllers在不需要的时候就会被销毁了(因为service的底 ...
- 浅谈AngularJS的$parse服务
$parse 作用:将一个AngularJS表达式转换成一个函数 Usage$parse(expression) arguments expression:需要被编译的AngularJS语句 retu ...
- AngularJS Injector和Service的工作机制
要了解angularJS里的injector和Service是如何工作的,需要阅读/src/auto/injector.js.另外要结合/src/loader.js才能明白它的应用场景. auto/i ...
- angularjs 中使用 service 在controller 之间 share 对象和数据
在做angularjs 的UI 时,我们经常会遇到一个页面之间有几个controller,在controller 之间share 公共的一些数据和方法就变得比较困难,目前推荐的做法是创建一个servi ...
- AngularJS中使用service,并同步数据
service是单例对象,在应用中不同代码块之间共享数据. 对一些公用的方法封装到service中,然后通过依赖注入在Controller中调用,示例代码: 1.创建一个模块: var module ...
随机推荐
- jquery val() and text().
.val() works on input elements (or any element with a value attribute?) and .text() will not work on ...
- 高级I/O函数(3)-tee、fcntl函数
tee函数使用 功能描述:tee函数在两个管道文件描述符之间复制数据,也是零拷贝操作.它不消耗数据,因此源文件描述符仍然可以用于后续的操作. 函数原型: #include <fcntl.h> ...
- 最短路径算法——Dijkstra,Bellman-Ford,Floyd-Warshall,Johnson
根据DSqiu的blog整理出来 :http://dsqiu.iteye.com/blog/1689163 PS:模板是自己写的,如有错误欢迎指出~ 本文内容框架: §1 Dijkstra算法 §2 ...
- 16 3Sum Closest(输出距离target最近的三个数的和Medium)
题目意思:给一个数组,给一个target,找三个数的和,这个和要与target距离最近,输出这个和 思路:这个题比3sum要稍微简单一点,如果需要优化,也可以去重,不过因为结果唯一,我没有去重. mi ...
- Thinkphp 验证码、文件上传
一.验证码 验证码参数 例题:登录时验证下验证码 LoginController.class.php <?php namespace Home\Controller; use Think\Con ...
- 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 ...
- [转载]在 Windows 10 中, 如何卸载和重新安装 OneNote App
在 Windows 10 中, 如何卸载和重新安装 OneNote App 15/8/2015 使用 PowerShell 命令卸载 OneNote App 开始菜单 -> 输入 "P ...
- Xcode 快捷键-b
0.跳到指定行command + L; 1.配置高亮方案:Fonts & Colors 2.键盘快捷键:Key Bindings 3.代码缩进:Re-indent selection.(快捷键 ...
- keil优化等级设置
附表:Keil C51中的优化级别及优化作用 级别说明 0 常数合并:编译器预先计算结果,尽可能用常数代替表达式.包括运行地址计算. 优化简单访问:编译器优化访问8051系统的内部数据和位地址. 跳转 ...
- 【转】(DT系列一)DTS结构及其编译方法----不错
原文网址:http://www.cnblogs.com/biglucky/p/4057476.html DTS结构及其编译方法 一:主要问题 1,需要了解dtsi与dts的关系 2,dts的结构模型 ...