解决ng界面长表达式(ui-set)
本文来自网友sun shine的问题,问题如下:
您好, 我想求教一个问题.
在$scope中我的对象名字写的特别深, 在 html中我又多次用到了同一个对象, 对不对在 html中让它绑定到一个临时变量呢?
比如:
$scope.this.is.a.very.deep.obj = {
'name': 'xxx',
'state': 'active'};
在 模板中,
{{this.is.a.very.deep.obj.name}}
{{this.is.a.very.deep.obj.state}}
类似于这种, 我能否把 this.is.a.very.deep.obj 预先赋给一个临时的变量, 然后在 两个 span中只需 o.name, o.state 就行了呢? 我觉得这样解析起来是不是快一点.
但是我试了, 并没有成功. 求指点.
先谢了.
在这里首先需要说明的是ng界面的所有引用都需要在$scope这个viewmodel(ui和view的胶水层),所以如果我们希望能够把表达式变得更可读,更友好,那么我们就必须在$scope上创建这个变量。
再则对于ng其使用使用的一堆的$watch,实现脏检查,如果你理解这些了,那么我们就可以很容易的实现一套如spring的
<c:set var="xxx" expression="xxx" />
的tag.
对于实现这类tag,我们最好的方式则是利用ng的directive来实现,代码如下:
angular.module("greengerong.ui.tag", [])
.directive("uiSet", [
function() {
return {
restrict: "EA",
link: function(scope, elm, iAttrs) {
scope.$watch(iAttrs.expression, function(val) {
scope[iAttrs.
var] = val;
var apply = !scope.$$phase ? scope.$apply : angular.noop;
apply();
});
}
};
}
]);
demo效果请移步jsbin demo;
解决ng界面长表达式(ui-set)的更多相关文章
- 解决Floodlight界面无法显示问题
参考: 解决Floodlight1.2+Mininet问题及使用安装 解决Floodlight界面无法显示问题 执行以下命令启动Floodlight时: java -jar target/floodl ...
- 双缓冲队列解决WPF界面卡死
工作中的项目,CS客户端会通过MQ接收前端设备发送的信息,之前测试的时候,由于测试的数据不大,没有进行压力测试,软件可以正常工作,随着项目现场设备数量的增加,CS客户端从MQ中订阅的数据量不断增加,最 ...
- (转)iOS7界面设计规范(13) - UI基础 - 与iOS的系统整合
突然就到了周日傍晚.你永远不会知道自己的生活在接下来的一周当中能够发生多少变化:各种不可预知性所带来的更多是快感还是焦虑与不安,冷暖自知.相比之下,白天工作当中那些需求列表与排期文档就显得那么可爱了, ...
- 磁贴界面颜色 Metro UI Colors
http://www.oschina.net/p/metro-ui-colors 介绍 包含了磁贴界面(Metro UI)使用的颜色集合(浅绿色,绿色,深绿色,品红,紫色等).可以查看每一种颜色的各种 ...
- CSS样式 解决文字过长显示省略号问题
一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...
- Roslyn 使用 WriteLinesToFile 解决参数过长无法传入
在写 Roslyn 的时候,经常需要辅助编译的工具,而这些工具需要传入一些参数,在项目很大的时候,会发现自己传入的参数比微软限制控制台可以传入的参数大很多,这时就无法传入了参数 本文告诉大家如何使用 ...
- 解决使用Touch ID API在回调时界面“长时间卡住”的问题
Touch ID是iOS8上新公开的API,关于详细介绍和用法可以看CocoaChina的这两篇文章:上 和 下,在此篇文章中不再赘述. 我在app中需要的效果是如果touch id验证通过,则页面p ...
- 杂谈之界面设计和UI测试 (一)
界面设计,是设计师的工作,UI测试,是测试人员的工作,UI测试究竟是测什么的?界面的排版布局?还是界面文字的书写错误?如果是排版布局,那么设计师该不会傻到设计一个看起来很不友好的界面,坐等测试人员发现 ...
- Delphi XE6 使用定时器或者线程解决程序界面无响应问题
---恢复内容开始--- 介绍 在手机应用上,我们不应该使用速度慢的代码,当然我们在桌面程序上也应该避免这个,当手机应用长时间没有相应的时候,程序会提示“程序没响应,是否关闭”的提示,这个非常不好,所 ...
随机推荐
- javascript学习面向对象(二)
主要内容: prototype扩展应用示例: 对比如下: 数组中forEach用法示例: 从上面示例可以看出,forEach只适合遍历一维数组: 应用prototype扩展实现全部元素遍历如下: 简单 ...
- ms sql server 在cmd中执行sqlcmd的时候报错
cmd下直接输入sqlcmd会提示 错误: HResult 0x2,级别 16,状态 1命名管道提供程序: 无法打开与 SQL Server 的连接 [2].Sqlcmd: 错误: Microsoft ...
- [game]十字链表的AOI算法实现
AOI主要有九宫格.灯塔和十字链表的算法实现.本文阐述十字链表的实现和尝试. 1. 基本原理 根据二维地图,将其分成x轴和y轴两个链表.如果是三维地图,则还需要维护多一个z轴的链表.将对象的坐标值按照 ...
- c# Exception 异常信息归整
private string ErrorMessage(Exception exception) { StringBuilder stringBuilder = new StringBuilder() ...
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- andorid frameanimation
Android中的逐帧动画 先来说说什么是逐帧动画,逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使 ...
- 构建angular项目
1. 安装yo与gulp bower $ npm install -g yo $ npm install -g gulp bower 2. 快速创建 $ npm install -g gene ...
- Picard 法求方程根
要点: 首先对于任何方程 :f(x)=0 ,可以转换成 f(x)+x-x => f(x)+x=x; 取g(x)=f(x)+x; 那么 新方程g(x)=x 的解即是 f(x)=0的解,即g(x) ...
- CentOS添加用户及赋予sudo权限
在CentOS下添加一个用户假设用户名:username 密码:userpwd 新建用户: adduser username 修改密码: passwd username 根据提示重复输入两遍userp ...
- jboss hello world
http://developers.redhat.com/products/devstudio/get-started/ 1. 下载 Red Hat JBoss Developer studio 2. ...