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>

相關標籤/搜索