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
---
src/directives.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 58 insertions(+)
(limited to 'src')
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');
+});
--
cgit v1.2.3