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] atrribute的样式？

当浏览器加载此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代码没有任何影响

1 个答案: