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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 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 分页函数multi() discuz
2009/06/21 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
nginx 设置多个站跨域
2021/03/09 Servers
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
python实现将元祖转换成数组的方法
2015/05/04 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
深入了解python列表(LIST)
2020/06/08 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
举例说明类变量和实例变量的区别
2016/06/30 面试题
总经理任命书
2014/03/29 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
人民调解协议书范本
2014/10/11 职场文书
工厂见习报告范文
2014/10/31 职场文书
干部培训工作总结2015
2015/05/25 职场文书
纪委立案决定书
2015/06/24 职场文书