Best IT Recipes

How to use the ng-cloak directive?

Somehow, the ng-cloak in AngularJS does not work. I want to hide {{}} when the page loads. Because it looks awful.

<!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>
+60
javascript angularjs angularjs-directive ngcloak
Mar 30 '15 at 5:58
source share
12 answers

Add this css from here

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

and use either the class name or the attribute in the parent div or somewhere where you defined your application.

eg:

 <div ng-app="Random" class="ng-cloak"> </div>
+98
Mar 30 '15 at 6:23
source share

From Angular docs :

For best results, angular.js script should be loaded in the header section of the html document; alternatively, the css rule above should be included in the external application stylesheet.

+30
Mar 30 '15 at 6:00
source share

You must specify these rules in your CSS:

 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
+10
Mar 30 '15 at 6:00
source share

Add below to your css file: -

 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
+8
Mar 30 '15 at 6:00
source share

Using ngBind should also fix this (sometimes I develop SharePoint and ngCloak doesn't work).

AngularJS Docs:

It is preferable to use ngBind instead of {{expression}} if the template is instantly displayed by the browser in its original state before Angular compiles it. Since ngBind is an attribute of an element, it makes bindings invisible to the user during page loading.

An alternative solution to this problem would be to use the ngCloak directive.

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>
+6
Sep 23 '15 at 21:07
source share

My solution. I think I tried all of the above suggestions, but nothing worked. Some people use ng-include, but it seems a little big, in the future it can be scary with the inner area being created. So he tried to use the ng style and style. In my affected main div.

 <div class="container" style="display:hidden;" ng-style="loaded">

Then I set the sphere variable loaded into the base controller.

  $ scope.loaded = {display: 'block'};

Still got all of these {{}}. It is strange when display sets are blocked only when angularjs loads. Then I noticed that I had a firefox f12 developer console working . He does things. Stupid i

+5
Aug 13 '15 at 7:31
source share

Starting with angular 1.3, you must specify a name for the ng-app attribute in order for it to work.

 <html lang="en" ng-app="myApp">

In your JS:

 angular.module("myApp",[])

This will load angular.

But for the current situation, when you load angular at the bottom of the page, it takes time to load. So the css required for ng-cloak is not yet available.

Move the js tag to a tag, or load specific CSS code into your CSS for it to work.

 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
+3
Mar 30 '15 at 6:00
source share

In my case, I realized that my problems were collecting while waiting for ajax requests. Ng-cloak probably works for static content, but if the template depends on ajax data, then it is displayed this way before receiving the ajax response.

To avoid this, I define a directive:

Angu

 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); } }; }]);

With a bit of CSS:

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

Then in your main HTML file:

 <div ui-view data-ajax-cloak></div>

Note: this is not as complicated as ng-cloak, since it is a global cesspool, it hides everything until all requests are complete.

+3
Jul 25 '16 at 9:48
source share

I tried all the answers above and more, without help. My (large) page will flicker with every load. My solution was to add this right after the body tag:

 <div style="display:flex" opacity=0> <status-progress></status-progress> <h3>Loading... </h3> </div>

and wrap everything on the page:

 <div class="loaded" style="opacity: 0" opacity=1> ... </div>

directive:

 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); } } }

To make the page look smoother, the stylesheet:

 .loaded{ transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; }

Thus, you see “Download” for 1 second while everything is preparing.

+2
Jun 16 '16 at 14:13
source share

Since none of these answers gave me the desired result, I did everything I wanted by creating a directive very similar to ng-cloak , but wrapping the code in $timeout so that it would wait until the end of $digest to remove the cloaking attribute and / or class. This was the only way I was able to truly hide the {{}} bindings in the browser.

 angular.directive('myCloak', function($timeout) { return { restrict: 'A', compile: function (element, attr) { $timeout(function () { attr.$set('myCloak', undefined); element.removeClass('my-cloak'); }); } }; });

And don't forget that for this new attribute / class you will need to add a custom css rule:

 [my\:cloak], [my-cloak], [data-my-cloak], [x-my-cloak], .my-cloak, .x-my-cloak { display: none !important; }
+1
Nov 23 '16 at 13:47
source share

Using the hotfix recommended here works for me ...

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")
0
Jan 14 '16 at 23:14
source share

Use ngBind when ng-cloak is unavailable.

 <p ng-show="!isShow" ng-bind="isShow"></p>
0
Oct. 15 '17 at 11:32
source share


More articles:


All Articles