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 相关文章推荐
通过javascript设置css属性的代码
Dec 28 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
vue组件实例解析
Jan 10 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
详解vue express启动数据服务
Jul 05 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php 静态变量的初始化
2009/11/15 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
php实现可运算的验证码
2015/11/10 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
js网页版计算器的简单实现
2013/07/02 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
js实现验证码功能
2020/07/24 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
学习python处理python编码问题
2011/03/13 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python 性能提升的几种方法
2016/07/15 Python
Python操作Excel之xlsx文件
2017/03/24 Python
Python中常见的异常总结
2018/02/20 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
车辆维修工自我评价怎么写
2013/09/20 职场文书
网上商城创业计划书范文
2014/01/31 职场文书
电工工作职责范本
2014/02/22 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
python删除csv文件的行列
2021/04/06 Python