diff options
| author | Igor Minar | 2011-03-10 14:26:22 -0800 |
|---|---|---|
| committer | Igor Minar | 2011-03-11 08:45:43 -0800 |
| commit | 9d5c53379180a110e427a01a1446eada3f0fc3d6 (patch) | |
| tree | 536adf248746cbf6c38199ab033cfe29adc1859e /src | |
| parent | 7414e7b53302863911c734c8586b76767d2ded6b (diff) | |
| download | angular.js-9d5c53379180a110e427a01a1446eada3f0fc3d6.tar.bz2 | |
ng:autobind now optionally takes element id
so it is possible to easily compile just a part of a document.
e.g.:
<html>
<head>
<title>partially compiled doc</title>
<script src="angular.js" ng:autobind="compileThis"></script>
</head>
<body>
this part won't be compiled: {{1+2}}
<div id="compileThis" ng:init="i=0" ng:click="i = i+1">
Click count: {{i}}
</div>
</body>
</html>
Diffstat (limited to 'src')
| -rw-r--r-- | src/Angular.js | 45 | ||||
| -rw-r--r-- | src/angular-bootstrap.js | 2 | ||||
| -rw-r--r-- | src/angular.suffix | 2 |
3 files changed, 21 insertions, 28 deletions
diff --git a/src/Angular.js b/src/Angular.js index 6c6ee1e4..a91bf04c 100644 --- a/src/Angular.js +++ b/src/Angular.js @@ -836,19 +836,7 @@ function encodeUriSegment(val) { * This section explains how to bootstrap your application with angular, using either the angular * javascript file, or manually. * - * - * ## The angular distribution - * Note that there are two versions of the angular javascript file that you can use: - * - * * `angular.js` - the development version - this file is unobfuscated, uncompressed, and thus - * human-readable and useful when developing your angular applications. - * * `angular.min.js` - the production version - this is a minified and obfuscated version of - * `angular.js`. You want to use this version when you want to load a smaller but functionally - * equivalent version of the code in your application. We use the Closure compiler to create this - * file. - * - * - * ## Auto-bootstrap with `ng:autobind` + * # Auto-bootstrap with `ng:autobind` * The simplest way to get an <angular/> application up and running is by inserting a script tag in * your HTML file that bootstraps the `http://code.angularjs.org/angular-x.x.x.min.js` code and uses * the special `ng:autobind` attribute, like in this snippet of HTML: @@ -866,9 +854,13 @@ function encodeUriSegment(val) { </html> * </pre> * - * The `ng:autobind` attribute tells <angular/> to compile and manage the whole HTML document. The - * compilation occurs in the page's `onLoad` handler. Note that you don't need to explicitly add an - * `onLoad` event; auto bind mode takes care of all the magic for you. + * The `ng:autobind` attribute without any value tells angular to compile and manage the whole HTML + * document. The compilation occurs as soon as the document is ready for DOM manipulation. Note that + * you don't need to explicitly add an `onLoad` event handler; auto bind mode takes care of all the + * work for you. + * + * In order to compile only a part of the document, specify the id of the element that should be + * compiled as the value of the `ng:autobind` attribute, e.g. `ng:autobind="angularContent"`. * * * ## Auto-bootstrap with `#autobind` @@ -893,6 +885,8 @@ function encodeUriSegment(val) { * * In this case it's the `#autobind` URL fragment that tells angular to auto-bootstrap. * + * Similarly to `ng:autobind`, you can specify an element id that should be exclusively targeted for + * compilation as the value of the `#autobind`, e.g. `#autobind=angularContent`. * * ## Filename Restrictions for Auto-bootstrap * In order for us to find the auto-bootstrap script attribute or URL fragment, the value of the @@ -926,12 +920,9 @@ function encodeUriSegment(val) { <script type="text/javascript" src="http://code.angularjs.org/angular-0.9.3.min.js" ng:autobind></script> <script type="text/javascript"> - (function(window, previousOnLoad){ - window.onload = function(){ - try { (previousOnLoad||angular.noop)(); } catch(e) {} - angular.compile(window.document); - }; - })(window, window.onload); + (angular.element(document).ready(function() { + angular.compile(document)(); + })(document); </script> </head> <body> @@ -973,10 +964,12 @@ function encodeUriSegment(val) { * APIs are bound to fields of this global object. * */ -function angularInit(config){ - if (config.autobind) { - // TODO default to the source of angular.js - var scope = compile(window.document)(createScope({'$config':config})), +function angularInit(config, document){ + var autobind = config.autobind; + + if (autobind) { + var element = isString(autobind) ? document.getElementById(autobind) : document, + scope = compile(element)(createScope({'$config':config})), $browser = scope.$service('$browser'); if (config.css) diff --git a/src/angular-bootstrap.js b/src/angular-bootstrap.js index 41ec2088..946968ab 100644 --- a/src/angular-bootstrap.js +++ b/src/angular-bootstrap.js @@ -153,7 +153,7 @@ //angular-ie-compat.js needs to be pregenerated for development with IE<8 if (msie<8) addScript('../angular-ie-compat.js'); - angularInit(angularJsConfig(document)); + angularInit(angularJsConfig(document), document); } if (window.addEventListener){ diff --git a/src/angular.suffix b/src/angular.suffix index fcd3e577..179e0ce6 100644 --- a/src/angular.suffix +++ b/src/angular.suffix @@ -1,6 +1,6 @@ jqLiteWrap(document).ready(function(){ - angularInit(angularJsConfig(document)); + angularInit(angularJsConfig(document), document); }); })(window, document); |