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 相关文章推荐
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
基于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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
解析link_mysql的php版
2013/06/30 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
JS实现分页导航效果
2020/02/19 Javascript
Python实现配置文件备份的方法
2015/07/30 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python深度优先算法生成迷宫
2018/01/22 Python
TensorFlow的权值更新方法
2018/06/14 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
留学推荐信写作指南
2014/01/25 职场文书
工程师岗位职责规定
2014/02/26 职场文书
3的组成教学反思
2014/04/30 职场文书
布达拉宫的导游词
2015/02/02 职场文书