From 30753cb1310893841fdb0b17c075b6a72e8c8d8a Mon Sep 17 00:00:00 2001 From: Igor Minar Date: Sat, 20 Aug 2011 00:24:24 -0700 Subject: feat(ng:cloak): add ng:cloak directive --- css/angular.css | 4 +++ docs/src/templates/docs.css | 4 +++ docs/src/templates/index.html | 4 +-- src/directives.js | 58 +++++++++++++++++++++++++++++++++++++++++++ test/directivesSpec.js | 27 ++++++++++++++++++++ 5 files changed, 95 insertions(+), 2 deletions(-) diff --git a/css/angular.css b/css/angular.css index 9c1ddedb..6c2c52f4 100644 --- a/css/angular.css +++ b/css/angular.css @@ -1,5 +1,9 @@ @charset "UTF-8"; +[ng\:cloak], .ng-cloak { + display: none; +} + .ng-format-negative { color: red; } diff --git a/docs/src/templates/docs.css b/docs/src/templates/docs.css index c81555bf..6ba83568 100644 --- a/docs/src/templates/docs.css +++ b/docs/src/templates/docs.css @@ -416,3 +416,7 @@ li { text-align: left; background-color: lightgray; } + +[ng\:cloak], .ng-cloak { + display: none; +} diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html index feb2468f..26c1eaec 100644 --- a/docs/src/templates/index.html +++ b/docs/src/templates/index.html @@ -56,7 +56,7 @@ -

-
+
diff --git a/src/directives.js b/src/directives.js index 2ca7b79b..e0ac6c39 100644 --- a/src/directives.js +++ b/src/directives.js @@ -813,3 +813,61 @@ angularDirective("ng:style", function(expression, element){ }; }); + +/** + * @ngdoc directive + * @name angular.directive.ng:cloak + * + * @description + * The `ng:cloak` directive is used to prevent the Angular html template from being briefly + * displayed by the browser in its raw (uncompiled) form while your application is loading. Use this + * directive to avoid the undesirable flicker effect caused by the html template display. + * + * The directive can be applied to the `` element, but typically a fine-grained application is + * prefered in order to benefit from progressive rendering of the browser view. + * + * `ng:cloak` works in cooperation with a css rule that is embedded within `angular.js` and + * `angular.min.js` files. Following is the css rule: + * + *
```
+ * [ng\:cloak], .ng-cloak {
+ *   display: none;
+ * }
+ * 
```
+ * + * When this css rule is loaded by the browser, all html elements (including their children) that + * are tagged with the `ng:cloak` directive are hidden. When Angular comes across this directive + * during the compilation of the template it deletes the `ng:cloak` element attribute, which + * makes the compiled element visible. + * + * For the best result, `angular.js` script must be loaded in the head section of the html file; + * alternatively, the css rule (above) must be included in the external stylesheet of the + * application. + * + * Legacy browsers, like IE7, do not provide attribute selector support (added in CSS 2.1) so they + * cannot match the `[ng\:cloak]` selector. To work around this limitation, you must add the css + * class `ng-cloak` in addition to `ng:cloak` directive as shown in the example below. + * + * @element ANY + * + * @example + + +
{{ 'hello' }}
+
{{ 'hello IE7' }}
+ + + it('should remove the template directive and css class', function() { + expect(element('.doc-example-live #template1').attr('ng:cloak')). + not().toBeDefined(); + expect(element('.doc-example-live #template2').attr('ng:cloak')). + not().toBeDefined(); + }); + + + * + */ +angularDirective("ng:cloak", function(expression, element) { + element.removeAttr('ng:cloak'); + element.removeClass('ng-cloak'); +}); diff --git a/test/directivesSpec.js b/test/directivesSpec.js index 488ebaa2..1d26973c 100644 --- a/test/directivesSpec.js +++ b/test/directivesSpec.js @@ -381,4 +381,31 @@ describe("directive", function(){ }); + describe('ng:cloak', function() { + + it('should get removed when an element is compiled', function() { + var element = jqLite('
'); + + expect(element.attr('ng:cloak')).toBe(''); + + angular.compile(element) + + expect(element.attr('ng:cloak')).toBeUndefined(); + }); + + + it('should remove ng-cloak class from a compiled element', function() { + var element = jqLite('
'); + + expect(element.hasClass('foo')).toBe(true); + expect(element.hasClass('ng-cloak')).toBe(true); + expect(element.hasClass('bar')).toBe(true); + + angular.compile(element); + + expect(element.hasClass('foo')).toBe(true); + expect(element.hasClass('ng-cloak')).toBe(false); + expect(element.hasClass('bar')).toBe(true); + }); + }); }); -- cgit v1.2.3