Kot*_*aro 66 javascript angularjs angularjs-directive ngcloak
不知何故,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>
Yas*_*ser 105
从这里添加这个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>
m0m*_*eni 10
您必须在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是一个元素属性,因此在加载页面时,它会使绑定对用户不可见.
该问题的另一种解决方案是使用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>
在您的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那样复杂,因为它是一个全局的cloack,它会隐藏所有请求,直到所有请求都完成.
我的解决方案我认为我尝试了以上所有建议,但没有任何效果.有些人使用ng-include但似乎有点太多了,进一步说它可能会对创建的内部范围感到害怕.所以它尝试使用样式和ng风格.在我受影响的主要div.
<div class="container" style="display:hidden;" ng-style="loaded">
然后我设置在我的基本控制器中加载的范围变量.
$scope.loaded ={display:'block'};
仍然得到了所有{{}}.当显示设置仅在angularjs加载时阻止时很奇怪.然后我注意到我运行了firefox f12开发人员控制台.它做的东西.愚蠢的我