diff options
| author | Igor Minar | 2011-08-20 00:24:24 -0700 |
|---|---|---|
| committer | Igor Minar | 2011-08-24 15:01:49 -0700 |
| commit | 30753cb1310893841fdb0b17c075b6a72e8c8d8a (patch) | |
| tree | 7c07b19f1dd026f6e1f28b3add84e7af10b0b2fd /src/directives.js | |
| parent | dbf8afcba0cfc0e341e3ebd2dadeba627c083f0a (diff) | |
| download | angular.js-30753cb1310893841fdb0b17c075b6a72e8c8d8a.tar.bz2 | |
feat(ng:cloak): add ng:cloak directive
Diffstat (limited to 'src/directives.js')
| -rw-r--r-- | src/directives.js | 58 |
1 files changed, 58 insertions, 0 deletions
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 `<body>` 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: + * + * <pre> + * [ng\:cloak], .ng-cloak { + * display: none; + * } + * </pre> + * + * 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 + <doc:example> + <doc:source> + <div id="template1" ng:cloak>{{ 'hello' }}</div> + <div id="template2" ng:cloak class="ng-cloak">{{ 'hello IE7' }}</div> + </doc:source> + <doc:scenario> + 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(); + }); + </doc:scenario> + </doc:example> + * + */ +angularDirective("ng:cloak", function(expression, element) { + element.removeAttr('ng:cloak'); + element.removeClass('ng-cloak'); +}); |