如何正确使用 ng-cloak 指令

How to correctly use ng-cloak directive?

本文关键字：ng-cloak 指令 何正确      更新时间：2023-09-26

不知何故，AngularJS中的ng-cloak不起作用。我想在加载页面时隐藏 {{ }}。因为它看起来很糟糕。

<!DOCTYPE html>
<html lang="en" ng-app>
    <head>
        <meta charset="UTF-8">
        <title>Angular Sample</title>
    </head>
    <body ng-model="isShow" ng-init="isShow=true">
        <p ng-show="isShow"><span ng-cloak>{{ isShow }}</span></p>
        <p ng-show="!isShow"><span ng-cloak>{{ isShow }}</span></p>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </body>
</html>

从这里添加这个 css

[ng':cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

并在父div 上或已定义应用的任何位置使用类名或属性。

例如：

<div ng-app="Random" class="ng-cloak">
</div>

来自 Angular 文档：

为了获得最佳结果，angular.js脚本必须加载到 html 文档的 head 部分中;或者，上面的 css 规则必须包含在应用程序的外部样式表中。

您必须在 CSS 中指定以下规则：

[ng':cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

使用ngBind也应该消除这种情况(我有时在SharePoint中开发，ngCloak不起作用(。

AngularJS 文档：

最好

使用 ngBind 而不是 {{ 表达式 }} 如果 模板由浏览器以原始状态即时显示 在 Angular 编译它之前。由于ngBind是一个元素属性，因此它 使绑定在页面加载时对用户不可见。

这个问题的另一种解决方案是使用ngCloak 命令。

.JS：

var app = angular.module('test', []);
app.controller('testCtrl', ['$scope', function($scope) {
  $scope.test = "Hello World";
}]);

.HTML：

<html ng-app="test">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
  <h1 ng-bind="test"></h1>
</body>
</html>

在 css 文件中添加以下内容：- 

[ng':cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

就我而言，我认为我的麻烦是由于挂起的 ajax 请求。Ng-cloak 可能适用于静态内容，但如果模板依赖于 ajax 数据，那么它会在接收 ajax 响应之前呈现。

为了避免它，我定义了一个指令：

安古

mymodule
        .directive("ajaxCloak", ['$interval', '$http', function ($interval, $http) {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    let stop = $interval(() => {
                        if ($http.pendingRequests.length === 0) {
                            $interval.cancel(stop);
                            attrs.$set("ajaxCloak", undefined);
                            element.removeClass("ajax-cloak");
                        }
                    }, 100);
                }
            };
        }]);

用一点CSS：

[ajax-cloak], [data-ajax-cloak], [x-ajax-cloak], .ajax-cloak {
  display: none !important;
}

然后在主 HTML 文件中：

<div ui-view data-ajax-cloak></div>

注意：这不像 ng-cloak 那么复杂，因为这是一个全局漏洞，它会隐藏所有内容，直到所有请求完成。

我的解决方案我想我尝试了上述所有建议，但没有任何效果。有些使用 ng-include，但它似乎有点多，此外，创建的内部范围可能会很可怕。因此，它通过使用样式和ng样式进行了尝试。在我受影响的主分区中。 

<div class="container" style="display:hidden;" ng-style="loaded">

然后我设置在我的基本控制器中加载的范围变量。 

$scope.loaded ={display：'block'};

仍然得到所有这些{{ }}。当显示设置为仅在加载 angularjs 时阻止时，这很奇怪。 然后我注意到我正在运行 Firefox f12 开发人员控制台。它在做事。愚蠢的我

从角度 1.3 开始，您必须为 ng-app 属性指定一个名称才能使其正常工作。

<html lang="en" ng-app="myApp">

在你的JS中：

angular.module("myApp",[])

这将使角度引导。

但是对于当前情况，由于您在页面底部加载角度，因此加载需要时间。因此，ng-cloak所需的 css 尚不可用。

将js移动到标记或将特定的 CSS 代码加载到 CSS 中以使其正常工作。

[ng':cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

我已经尝试了上面的所有答案，甚至更多，没有任何帮助。我的(大(页面在每次加载时都会闪烁。我的解决方案是在正文标签之后添加这个：

<div style="display:flex" opacity=0>
  <status-progress></status-progress>
  <h3>Loading... </h3>
</div>

并将所有内容包装在页面中：

<div class="loaded" style="opacity: 0" opacity=1> ... </div>

命令：

app.directive('opacity', opacity);
    function opacity($timeout) {
        return {
            link: function (scope, element, attrs) {
                var value = attrs.opacity;
                $timeout(function () {
                    element[0].style.opacity = value;
                },500);
            }
        }
    }

为了使页面看起来"更流畅"，样式表：

.loaded{
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
}

这样，您会看到"正在加载"1秒，而一切都准备就绪。

由于这些答案都没有给我想要的结果，我通过创建一个与ng-cloak非常相似的指令来完成我想要的，但将代码包装在$timeout中，以便它等到$digest周期结束才能删除伪装属性和/或类。 这是我能够在浏览器中真正隐藏{{}}绑定的唯一方法。

angular.directive('myCloak', function($timeout) {
  return {
    restrict: 'A',
    compile: function (element, attr) {
      $timeout(function () {
        attr.$set('myCloak', undefined);
        element.removeClass('my-cloak');
      });
    }
  };
});

并且不要忘记，您必须为此新属性/类添加自定义css规则：

[my':cloak], [my-cloak], [data-my-cloak], [x-my-cloak], .my-cloak, .x-my-cloak {
  display: none !important;
}

使用此处推荐的修复程序对我有用...

https://github.com/opitzconsulting/jquery-mobile-angular-adapter/issues/167

.CSS：

.my-cloak {
  display: none  !important;
}

.JS：

$scope.$on('$viewContentLoaded', function(){
    $('.my-cloak').removeClass('my-cloak');
});

.HTML：

div(class="my-cloak")

当 ng-cloak 不可用时使用 ngBind。

<p ng-show="!isShow" ng-bind="isShow"></p>
相关文章：