zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    2019-12-18
    java读取XML文件,及封装XML字符串
    java不用中间变量交换两个值
    oracle获取当前月的第一个星期五
    2019-10-23
    HTTP中GET请求与POST请求的区别
    Java面试题整理(转载)
    java 字节流与字符流的区别
    20190822
    C++标准库string
  • 原文地址:https://www.cnblogs.com/toodeep/p/4966747.html
Copyright © 2011-2022 走看看