AngularJs解决表达式闪烁的问题（ng-cloak）

时间  2019-12-16
标签 angularjs 解决 表达式 闪烁 问题 cloak 栏目 AngularJS 繁體版
原文   原文链接

举例：html

<!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>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程