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>

Answer 1

从here

添加此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>

Answer 2

来自the Angular docs：

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

Answer 3

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

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

Answer 4

使用ngBind也应该消除它（我有时在SharePoint中开发并且ngCloak不起作用）。

AngularJS文档：

如果a，最好使用ngBind而不是{{expression}}   浏览器在其原始状态下暂时显示模板   在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>

Answer 5

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

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

Answer 6

我的解决方案我想我尝试了以上所有建议但没有任何效果。有些人使用ng-include但似乎有点太多了，进一步说它可能会对创建的内部范围感到害怕。所以它尝试使用样式和ng风格。在我受影响的主要div。

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

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

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

仍然拥有所有{{}}。当显示设置仅在angularjs加载时阻止时很奇怪。然后我注意到我运行了firefox f12开发者控制台。它做的东西。愚蠢我

Answer 7

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

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

安固

String command = "/etc/init.d/mosquitto status" ;
String output = executeCommand(command);
String output2 ="";
if(output.contains("stopped")){
    command="/etc/init.d/mosquitto start";
    output2=executeCommand(command);
}
sendEmail("amit@virtualweb.co.in",output+" "+output2);
            map.addAttribute("msg",output+"  "+output2);

有点CSS：

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

                }
            };
        }]);

然后在您的主HTML文件中：

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

注意：这不像ng-cloak那样复杂，因为它是一个全局的cloack，它会隐藏所有请求，直到所有请求都完成。

Answer 8

从角度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;
}

Answer 9

我已经尝试了上面的所有答案，而且没有任何帮助。我的（大）页面会在每次加载时闪烁。我的解决方案是在身体标签之后添加它：

MARK

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

<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);
            }
        }
    }

这样，你看到“加载”1秒，而一切都准备好了。

Answer 10

由于这些答案都没有给我预期的结果，我通过创建一个非常类似于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;
}

Answer 11

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

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

Answer 12

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

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

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

12 个答案: