Angularjs ng斗篷对闪烁的角度代码没有任何影响

Angularjs ng斗篷对闪烁的角度代码没有任何影响,angularjs,ngcloak,Angularjs,Ngcloak,当我按下下一页上的F5按钮时,AngularJS变量{{message}}和{{titlehalp}}会闪烁打开和关闭 我已经读到,要移除这个,我可以在body标签中添加ng-clope。但是,这没有效果,即它不会停止闪烁 即使我把它放在这里: <div ng-cloak>message: {{message}}</div> 消息:{{message} 该变量仍然闪烁 我还需要做什么才能使ng斗篷工作? <html> <head>

当我按下下一页上的F5按钮时,AngularJS变量
{{message}}
{{titlehalp}}
会闪烁打开和关闭

我已经读到,要移除这个,我可以在body标签中添加
ng-clope
。但是,这没有效果,即它不会停止闪烁

即使我把它放在这里:

<div ng-cloak>message: {{message}}</div>
消息:{{message}
该变量仍然闪烁

我还需要做什么才能使ng斗篷工作?

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

消息:{{message}}
标题:{{titleHelp}}
var mainModule=angular.module('mainModule',[]);
函数dataController($scope){
$scope.desired=true;
$scope.message='这是一个测试';
$scope.showHelp=函数(){
$scope.titleHelp='这是标题帮助';
};
$scope.removeHelp=函数(){
$scope.titleHelp='';
};
}

您是否添加了隐藏[ng斗篷]属性的样式

当浏览器加载此css规则时,所有使用NgClope指令标记的html元素(包括其子元素)都将隐藏。当Angular在编译模板期间遇到此指令时,它将删除ngclope元素属性,使编译后的元素可见

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

您是否尝试过使用
ng bind
?=><代码>您是否添加了可同时使用的样式。根据文档:=>在大页面上,Ng斗篷可能效率不高。@Mik378有趣的是,这也解决了问题,即使没有添加CSS。谢谢,这很有效。我阅读了文档“ngclope与angular.js和angular.min.js中嵌入的以下css规则协同工作”,并认为如果它已经嵌入,我就不需要添加任何内容。如果你的angular.js文件以任何方式是异步的,那么它就没有机会在页面完成渲染之前加载和添加样式,因此,您将看到花括号。这就是为什么您必须在页面顶部内联ngclope样式。