Skip to content

Commit 30753cb

Browse files
IgorMinarIgorMinar
committed
feat(ng:cloak): add ng:cloak directive
1 parent dbf8afc commit 30753cb

File tree

5 files changed

+95
-2
lines changed

5 files changed

+95
-2
lines changed

‎css/angular.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
@charset "UTF-8";
22

3+
[ng\:cloak], .ng-cloak {
4+
display: none;
5+
}
6+
37
.ng-format-negative {
48
color: red;
59
}

‎docs/src/templates/docs.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -416,3 +416,7 @@ li {
416416
text-align: left;
417417
background-color: lightgray;
418418
}
419+
420+
[ng\:cloak], .ng-cloak {
421+
display: none;
422+
}

‎docs/src/templates/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
<input type="text" name="search" id="search-box" placeholder="search the docs"
5757
tabindex="1" accesskey="s">
5858

59-
<ul id="content-list" ng:class="sectionId">
59+
<ul id="content-list" ng:class="sectionId" ng:cloak>
6060
<li ng:repeat="page in pages.$filter(search)" ng:class="getClass(page)">
6161
<a href="{{getUrl(page)}}" ng:class="selectedPartial(page)"
6262
ng:bind="page.shortName"
@@ -72,7 +72,7 @@ <h2 ng:bind="partialTitle"></h2>
7272
<ng:include id="content" src="getCurrentPartial()" onload="afterPartialLoaded()"></ng:include>
7373
</div>
7474

75-
<div id="footer">
75+
<div id="footer" ng:cloak>
7676
<a id="version"
7777
ng:href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md#{{versionNumber}}"
7878
ng:bind-template="v{{version}}">

‎src/directives.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -813,3 +813,61 @@ angularDirective("ng:style", function(expression, element){
813813
};
814814
});
815815

816+
817+
/**
818+
* @ngdoc directive
819+
* @name angular.directive.ng:cloak
820+
*
821+
* @description
822+
* The `ng:cloak` directive is used to prevent the Angular html template from being briefly
823+
* displayed by the browser in its raw (uncompiled) form while your application is loading. Use this
824+
* directive to avoid the undesirable flicker effect caused by the html template display.
825+
*
826+
* The directive can be applied to the `<body>` element, but typically a fine-grained application is
827+
* prefered in order to benefit from progressive rendering of the browser view.
828+
*
829+
* `ng:cloak` works in cooperation with a css rule that is embedded within `angular.js` and
830+
* `angular.min.js` files. Following is the css rule:
831+
*
832+
* <pre>
833+
* [ng\:cloak], .ng-cloak {
834+
* display: none;
835+
* }
836+
* </pre>
837+
*
838+
* When this css rule is loaded by the browser, all html elements (including their children) that
839+
* are tagged with the `ng:cloak` directive are hidden. When Angular comes across this directive
840+
* during the compilation of the template it deletes the `ng:cloak` element attribute, which
841+
* makes the compiled element visible.
842+
*
843+
* For the best result, `angular.js` script must be loaded in the head section of the html file;
844+
* alternatively, the css rule (above) must be included in the external stylesheet of the
845+
* application.
846+
*
847+
* Legacy browsers, like IE7, do not provide attribute selector support (added in CSS 2.1) so they
848+
* cannot match the `[ng\:cloak]` selector. To work around this limitation, you must add the css
849+
* class `ng-cloak` in addition to `ng:cloak` directive as shown in the example below.
850+
*
851+
* @element ANY
852+
*
853+
* @example
854+
<doc:example>
855+
<doc:source>
856+
<div id="template1" ng:cloak>{{ 'hello' }}</div>
857+
<div id="template2" ng:cloak class="ng-cloak">{{ 'hello IE7' }}</div>
858+
</doc:source>
859+
<doc:scenario>
860+
it('should remove the template directive and css class', function() {
861+
expect(element('.doc-example-live #template1').attr('ng:cloak')).
862+
not().toBeDefined();
863+
expect(element('.doc-example-live #template2').attr('ng:cloak')).
864+
not().toBeDefined();
865+
});
866+
</doc:scenario>
867+
</doc:example>
868+
*
869+
*/
870+
angularDirective("ng:cloak", function(expression, element) {
871+
element.removeAttr('ng:cloak');
872+
element.removeClass('ng-cloak');
873+
});

‎test/directivesSpec.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -381,4 +381,31 @@ describe("directive", function(){
381381

382382
});
383383

384+
describe('ng:cloak', function() {
385+
386+
it('should get removed when an element is compiled', function() {
387+
var element = jqLite('<div ng:cloak></div>');
388+
389+
expect(element.attr('ng:cloak')).toBe('');
390+
391+
angular.compile(element)
392+
393+
expect(element.attr('ng:cloak')).toBeUndefined();
394+
});
395+
396+
397+
it('should remove ng-cloak class from a compiled element', function() {
398+
var element = jqLite('<div ng:cloak class="foo ng-cloak bar"></div>');
399+
400+
expect(element.hasClass('foo')).toBe(true);
401+
expect(element.hasClass('ng-cloak')).toBe(true);
402+
expect(element.hasClass('bar')).toBe(true);
403+
404+
angular.compile(element);
405+
406+
expect(element.hasClass('foo')).toBe(true);
407+
expect(element.hasClass('ng-cloak')).toBe(false);
408+
expect(element.hasClass('bar')).toBe(true);
409+
});
410+
});
384411
});

0 commit comments

Comments
 (0)