AngularJS解决ng界面长表达式(ui-set)的方法分析  更新时间:2016年11月07日 10:33:22   作者:破狼   这篇文章主要介绍了AngularJS解决ng界面长表达式(ui-set)的方法,通过具体问题的分析并结合实例形式给出了AngularJS长表达式的相关使用技巧,需要的朋友可以参考下 本文实例讲述了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的 的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程序设计有所帮助。 您可能感兴趣的文章: Angularjs手动解析表达式($parse) AngularJS 表达式详解及实例代码 AngularJS表达式讲解及示例代码 AngularJS 表达式详细讲解及实例代码 AngularJS入门教程之AngularJS表达式 详解JavaScript的AngularJS框架中的表达式与指令 详解AngularJS中的表达式使用 AngularJS基础学习笔记之表达式 AngularJS实现DOM元素的显示与隐藏功能 AngularJS中实现显示或隐藏动画效果的方式总结 AngularJS实现元素显示和隐藏的几个案例 AngularJS打开页面隐藏显示表达式用法示例 AngularJS ng 长表达式 相关文章 Angularjs基础知识及示例汇总 本文给大家总结了一些angularjs的基础知识及相关示例,分享给大家,希望能对大家有所帮助。 2015-01-01 angular4 获取wifi列表中文显示乱码问题的解决 这篇文章主要介绍了angular4 获取wifi列表中文显示乱码问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-10-10 用angular实现多选按钮的全选与反选实例代码 本篇文章主要介绍了用angular实现多选按钮的全选与反选实例代码,非常具有实用价值,需要的朋友可以参考下 2017-05-05 基于AngularJS实现的工资计算器实例 这篇文章主要介绍了基于AngularJS实现的工资计算器,结合具体实例形式分析了AngularJS数值计算相关操作技巧,需要的朋友可以参考下 2017-06-06 关于angular浏览器兼容性问题的解决方案 这篇文章主要给大家介绍了关于angular浏览器兼容性问题的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-07-07 AngularJS实现表单元素值绑定操作示例 这篇文章主要介绍了AngularJS实现表单元素值绑定操作,结合具体实例形式分析了AngularJS针对表单元素属性相关操作技巧,需要的朋友可以参考下 2017-10-10 AngularJS 防止页面闪烁的方法 我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间。这篇文章主要介绍了AngularJS 防止页面闪烁的方法,需要的朋友可以参考下 2017-03-03 Angular ui.bootstrap.pagination分页 这篇文章主要为大家详细介绍了Angular ui.bootstrap.pagination 分页的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-01-01 Angualrjs和bootstrap相结合实现数据表格table 这篇文章主要介绍了Angualrjs和bootstrap相结合实现数据表格table,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-03-03 angularJs 表格添加删除修改查询方法 下面小编就为大家分享一篇angularJs 表格添加删除修改查询方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02 最新评论

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • Angularjs手动解析表达式($parse)
  • AngularJS 表达式详解及实例代码
  • AngularJS表达式讲解及示例代码
  • AngularJS 表达式详细讲解及实例代码
  • AngularJS入门教程之AngularJS表达式
  • 详解JavaScript的AngularJS框架中的表达式与指令
  • 详解AngularJS中的表达式使用
  • AngularJS基础学习笔记之表达式
  • AngularJS实现DOM元素的显示与隐藏功能
  • AngularJS中实现显示或隐藏动画效果的方式总结
  • AngularJS实现元素显示和隐藏的几个案例
  • AngularJS打开页面隐藏显示表达式用法示例
张贴在3