• ng-bind,ng-cloak优化数据显示


    <div>{{text}}</div> 当我们使用angular在页面中有取值的时候,如果出现网络加载慢的问题,可能会在页面上出现{{text}}这种不好的体验,那么angular有什么样的方法来解决呢。

    1.通过ng-bind  上述例子改写为:

    <div ng-bind="text"></div> 这样就可以解决上述问题。

    但是如果页面中有多个取值怎么办,如:<div>{{str1}},{{str2}}</div>

    这个时候可以通过ng-bind-template.用法如下:

    <div ng-bind-template="{{str1}},{{str2}}"></div>

    当取值的字符串含有html标签需要解析成htm结构的时候,可以用ng-bind-html.不过这种用法很少,需要依赖ngSanitize。

    还有一种情况就是不希望angular去解析,可以用ng-non-bindable来解决,如:

    <div ng-non-bindable>{{str}}</div>

    2.通过ng-cloak来解决

    <div ng-cloak>{{str}}</div>

    只需要在最普通的用法的标签上加上ng-cloak命令,这样angular会通过display属性来优化数据显示问题,当解析为完成之前是display:none

  • 相关阅读:
    利用docker搭建测试环境--安装
    fiddler获取手机请求
    python多线程
    linux下安装python的第三方module
    shell编程sed笔记
    shell 函数
    mysql information_schema 数据库简介:
    shell常用的判断条件
    gulp:gulp-sass基础教程
    (六):关于全局config配置
  • 原文地址:https://www.cnblogs.com/toodeep/p/4966747.html
Copyright © 2020-2023  润新知