ng-cloak 对闪烁 Angular 代码没有任何影响

Question

当我在下一页按住 F5 按钮时，AngularJS 变量 {{message}} 和 {{titleHelp}} 闪烁。

我读过要删除它，我可以将 ng-cloak 放在 body 标签中。但是，这没有任何效果，即它不会停止闪烁。

即使我把它放在这里:

<div ng-cloak>message: {{message}}</div>

那个变量还在闪烁。

我还需要做什么才能使 ng-cloak 起作用？

<html>
    <head>
        <style type="text/css">
        </style>
    </head>
    <body ng-app="mainModule" ng-controller="dataController" ng-cloak>

        <div>message: {{message}}</div>
        <div><input type="checkbox" ng-model="desired" ></div>
        <div>Title: <input type="text" ng-focus="showHelp()" ng-blur="removeHelp()" ng-model="title" 
                           ng-copy="handleCopy()" /> {{titleHelp}}</div>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src ="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script>

            var mainModule = angular.module('mainModule', []);
            function dataController($scope) {
                $scope.desired = true;
                $scope.message = 'This is a test.';
                $scope.showHelp = function () {
                    $scope.titleHelp = 'this is the title help';
                };
                $scope.removeHelp = function () {
                    $scope.titleHelp = '';
                };
            }
        </script>
    </body>
</html>

Answer 1

您是否添加了隐藏 [ng-cloak] 属性的样式？

当浏览器加载此 css 规则时，所有使用 ngCloak 指令标记的 html 元素（包括它们的子元素）都将被隐藏。当 Angular 在模板编译期间遇到此指令时，它会删除 ngCloak 元素属性，使编译后的元素可见。

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

ng-cloak 对闪烁 Angular 代码没有任何影响

ng-cloak has not effect whatsoever on blinking Angular code

angularjs

ngcloak