如何正确使用ng-cloak指令？
不知何故，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> 从这里添加这个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>
从Angular文档 ：
为了获得最好的结果，
angular.js脚本必须加载到html文档的head部分; 或者，上面的CSS规则必须包含在应用程序的外部样式表中。
你必须在CSS中指定这些规则：
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
在你的css文件中添加如下内容：
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
使用ngBind也应该消除（我有时在SharePoint中开发，ngCloak将无法正常工作）。
AngularJS文件：
如果在Angular编译之前浏览器在原始状态下暂时显示模板，则最好使用ngBind代替{{expression式}}。 由于ngBind是一个元素属性，因此在页面加载时，绑定对用户是不可见的。
这个问题的另一种解决scheme是使用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>
我的解决scheme，我认为我尝试了以上所有build议，但没有奏效。 有些使用ng-include，但似乎有点多，进一步它可能会被创build的内部范围可怕。 所以它试图通过使用风格和ng样式。 在我受影响的主要股利
<div class="container" style="display:hidden;" ng-style="loaded">
然后我设置范围variables加载在我的基地控制器。
$ scope.loaded = {display：'block'};
仍然有所有这些{{}}。 奇怪，当显示设置为只有当angularjs已经加载阻止。 然后我注意到我的firefox f12开发者控制台正在运行 。 它做的东西。 愚蠢的我
从1.3angular度起，你必须指定一个ng-app属性的名称才能工作。
<html lang="en" ng-app="myApp">
在你的JS：
angular.module("myApp",[])
这将使angular度bootstrap。
但是对于目前的情况，当你在页面底部加载angular度时，需要花费时间来加载。 所以ng-cloak所需的css还不可用。
要么将js移动到标签，要么将特定的CSS代码加载到CSS中以使其工作。
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
就我而言，我认为我的麻烦是等待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那么复杂，因为这是一个全局性的东西，它隐藏了一切，直到所有的请求都完成了。
我已经尝试了上述所有的答案，超出了很多，没有任何帮助。 我的（大）页面会在每个负载上闪烁。 我的解决scheme是在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); } } }
为了使页面看起来更“stream畅”，样式表：
.loaded{ transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; }
这样，你看到“加载”1秒，而一切都准备就绪。
由于这些答案都没有给出我想要的结果，所以我通过创build一个非常类似于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; }
使用这里推荐的修补程序适用于我…
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")
当ng-cloak不可用时使用ngBind。
<p ng-show="!isShow" ng-bind="isShow"></p>
