zoukankan      html  css  js  c++  java
  • AngularJs解决表达式闪烁的问题(ng-cloak)

    举例:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        /*[ng-cloak] 属性选择器 匹配所有包含这个属性的元素*/
        
        .ng-cloak,
        [ng-cloak] {
            display: none;
        }
        </style>
    </head>
    
    <body ng-app>
        <!-- 闪烁就是 表达式 在angularJS 还没识别之前 本来就是直接输出 然angular过了几百毫秒就识别了表达式 然后把大括号去掉 -->
        <!-- 原因就是angularJS 的代码加载需要时间  -->
        <!-- ng-cloak 这个类名或者属性 等angularJS加载出来之后就会把他删掉 -->
        <h1 ng-cloak class="ng-cloak">{{999999}}</h1>
        <h1 ng-cloak>{{"你好"}}</h1>
        <h1 ng-cloak>{{1+2}}</h1>
        <h1 ng-bind="'要绑定的值'"></h1>
        <h1 ng-bind="'萨瓦迪卡'"></h1>
        <!-- 1.引包 -->
        <script src="node_modules/angular/angular.js"></script>
        <!-- 1. 是吧angularJS的引包代码放到表达式的前面引入进来 (但是这种方式不推荐 因为JS代码是放到后面执行的因为JS代码影响页面渲染 不能再前面引入 得等页面和CSS加载完了再加载JS) -->
        <!-- 2. 使用ng-bind的方式 实现绑定表达式(或者值)到标签上 这种方式由于是angular的指令代码 只能等angualrJS出来了才能识别 才会生效 所以不会出现闪烁问题 -->
        <!-- 3. 使用ng-cloak类名或者属性 然后给这个类名加上display:none的属性 angular执行的时候会把这个类名或者属性删除 -->
        <!-- 因为闪烁是样式性问题就用样式解决他 同时也保留了之前写表达式的写 -->
    </body>
    
    </html>

  • 相关阅读:
    java-集合框架-泛型2-泛型限定
    进程间通信
    多进程编程基础概念
    linux deb 打包流程
    linux RPM 打包流程
    Python 第一個程序
    从注册验证码入手,我保住了30%的流失用户
    为什么Web端登录需要验证码?
    网络验证码的进化:从简单图文到无感验证
    公开课 | 金融知识图谱的应用探索
  • 原文地址:https://www.cnblogs.com/DZzzz/p/10206449.html
Copyright © 2011-2022 走看看