kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-04-29 05:15:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ng:cloak): add ng:cloak directive

Browse Source
This commit is contained in:
Igor Minar
2011-08-20 00:24:24 -07:00
parent dbf8afcba0
commit 30753cb131
5 changed files with 95 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/angular.css
View File

@@ -1,5 +1,9 @@
@charset "UTF-8"; @charset "UTF-8";
[ng\:cloak], .ng-cloak {
display: none;
}
.ng-format-negative { .ng-format-negative {
color: red; color: red;
} }

4
docs/src/templates/docs.css
View File

@@ -416,3 +416,7 @@ li {
text-align: left; text-align: left;
background-color: lightgray; background-color: lightgray;
} }
[ng\:cloak], .ng-cloak {
display: none;
}

4
docs/src/templates/index.html
View File

@@ -56,7 +56,7 @@
<input type="text" name="search" id="search-box" placeholder="search the docs" <input type="text" name="search" id="search-box" placeholder="search the docs"
tabindex="1" accesskey="s"> 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)"> <li ng:repeat="page in pages.$filter(search)" ng:class="getClass(page)">
<a href="{{getUrl(page)}}" ng:class="selectedPartial(page)" <a href="{{getUrl(page)}}" ng:class="selectedPartial(page)"
ng:bind="page.shortName" ng:bind="page.shortName"
@@ -72,7 +72,7 @@
<ng:include id="content" src="getCurrentPartial()" onload="afterPartialLoaded()"></ng:include> <ng:include id="content" src="getCurrentPartial()" onload="afterPartialLoaded()"></ng:include>
</div> </div>
<div id="footer"> <div id="footer" ng:cloak>
<a id="version" <a id="version"
ng:href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md#{{versionNumber}}" ng:href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md#{{versionNumber}}"
ng:bind-template="v{{version}}"> ng:bind-template="v{{version}}">

58
src/directives.js
View File

@@ -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');
});

27
test/directivesSpec.js
View File

@@ -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);
});
});
}); });