AngularJS解决ng界面长表达式(ui-set)的方法分析


Posted in Javascript onNovember 07, 2016

本文实例讲述了AngularJS解决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();
     });
    }
   };
  }
]);

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 #Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 #Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 #Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 #Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 #Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 #Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 #Javascript
You might like
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
python转换摩斯密码示例
2014/02/16 Python
Python中装饰器的一个妙用
2015/02/08 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
Python控制台实现交互式环境执行
2020/06/09 Python
Python魔术方法专题
2020/06/19 Python
python脚本第一行如何写
2020/08/30 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
英国女士家居服网站:hush
2017/08/09 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
社区学习十八大感想
2014/01/22 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
元宵晚会主持词
2014/03/25 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
暑期实践个人总结
2015/03/06 职场文书
唐山大地震观后感
2015/06/05 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python