javascript - 如何正确使用 ng-cloak 指令？

Question

不知何故，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>

score 105 · Accepted Answer

从这里添加这个 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>

score 31 · Accepted Answer

来自Angular 文档：

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

score 11 · Accepted Answer

您必须在 CSS 中指定这些规则：

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

score 9 · Accepted Answer

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

AngularJS 文档：

如果在 Angular 编译模板之前浏览器暂时以原始状态显示模板，则最好使用 ngBind 而不是 {{ expression }}。由于 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>

score 8 · Accepted Answer

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

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

score 6 · Accepted Answer

就我而言，我认为我的麻烦是由于未决的 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 那样复杂，因为它是一个全局 cloack，它会隐藏所有内容，直到所有请求都完成。

score 5 · Accepted Answer

我的解决方案我想我尝试了上述所有建议，但没有任何效果。一些使用 ng-include 但它似乎有点过分，而且它可能会因为创建的内部作用域而变得可怕。所以它通过使用 style 和 ng-style 进行了尝试。在我受影响的主 div 中。

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

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

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

仍然得到所有那些{{}}。奇怪的是，只有在加载 angularjs 时才设置为阻止显示。然后我注意到我运行了 firefox f12 开发者控制台。它在做事。愚蠢的我

score 3 · Accepted Answer

从 Angular 1.3 开始，您必须为 ng-app 属性指定名称才能使其工作。

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

在你的 JS 中：

angular.module("myApp",[])

这将使角度引导。

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

将移至js标签或将特定的 CSS 代码加载到您的 CSS 以使其工作。

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

score 2 · Accepted Answer

我已经尝试了上面的所有答案以及很多其他答案，但没有任何帮助。我的（大）页面会在每次加载时闪烁。我的解决方案是在body标签之后添加这个：

<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 秒，而一切都准备就绪。

score 1 · Accepted Answer

由于这些答案都没有给我想要的结果，我通过创建一个非常类似于ng-cloak但将代码包装在a 中的指令来完成我想要的$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;
}

score 0 · Accepted Answer

0

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

<p ng-show="!isShow" ng-bind="isShow"></p>

于 2017-10-15T11:32:53.467 回答

score 0 · Accepted Answer

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

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")

javascript - 如何正确使用 ng-cloak 指令？

12 回答 12

Related

Reference