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 | |
| parent | dbf8afcba0cfc0e341e3ebd2dadeba627c083f0a (diff) | |
| download | angular.js-30753cb1310893841fdb0b17c075b6a72e8c8d8a.tar.bz2 | |
feat(ng:cloak): add ng:cloak directive
| -rw-r--r-- | css/angular.css | 4 | ||||
| -rw-r--r-- | docs/src/templates/docs.css | 4 | ||||
| -rw-r--r-- | docs/src/templates/index.html | 4 | ||||
| -rw-r--r-- | src/directives.js | 58 | ||||
| -rw-r--r-- | 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 @@ <input type="text" name="search" id="search-box" placeholder="search the docs" tabindex="1" accesskey="s"> - <ul id="content-list" ng:class="sectionId"> + <ul id="content-list" ng:class="sectionId" ng:cloak> <li ng:repeat="page in pages.$filter(search)" ng:class="getClass(page)"> <a href="{{getUrl(page)}}" ng:class="selectedPartial(page)" ng:bind="page.shortName" @@ -72,7 +72,7 @@ <ng:include id="content" src="getCurrentPartial()" onload="afterPartialLoaded()"></ng:include> </div> - <div id="footer"> + <div id="footer" ng:cloak> <a id="version" ng:href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md#{{versionNumber}}" ng:bind-template="v{{version}}"> 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'); +}); 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('<div ng:cloak></div>'); + + 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('<div ng:cloak class="foo ng-cloak bar"></div>'); + + 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); + }); + }); }); |