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>
ExFlo · Mar 11, 2011 · 9d5c533 · 9d5c533
1 parent 7414e7b
commit 9d5c533
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 28 deletions.
diff --git 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) {
     &lt;/html&gt;
  * </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) {
       &lt;script type="text/javascript" src="http://code.angularjs.org/angular-0.9.3.min.js"
               ng:autobind&gt;&lt;/script&gt;
       &lt;script type="text/javascript"&gt;
-       (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);
       &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
@@ -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
@@ -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
@@ -1,6 +1,6 @@
 
   jqLiteWrap(document).ready(function(){
-    angularInit(angularJsConfig(document));
+    angularInit(angularJsConfig(document), document);
   });
 
 })(window, document);
diff --git a/test/AngularSpec.js b/test/AngularSpec.js
@@ -356,6 +356,60 @@ describe('angular', function(){
   });
 
 
+  describe('angularInit', function() {
+    var dom;
+
+    beforeEach(function() {
+      dom = jqLite('<div foo="{{1+2}}">{{2+3}}' +
+                     '<div id="child" bar="{{3+4}}">{{4+5}}</div>' +
+                   '</div>')[0];
+    });
+
+
+    afterEach(function() {
+      dealoc(dom);
+    });
+
+
+    it('should not compile anything if autobind is missing or false', function() {
+      angularInit({}, dom);
+      expect(sortedHtml(dom)).toEqual('<div foo="{{1+2}}">{{2+3}}' +
+                                        '<div bar="{{3+4}}" id="child">{{4+5}}</div>' +
+                                      '</div>');
+    });
+
+
+    it('should compile the document if autobind is true', function() {
+      angularInit({autobind: true}, dom);
+      expect(sortedHtml(dom)).toEqual('<div foo="3" ng:bind-attr="{"foo":"{{1+2}}"}">' +
+                                        '<span ng:bind="2+3">5</span>' +
+                                        '<div bar="7" id="child" ng:bind-attr="{"bar":"{{3+4}}"}">'+
+                                          '<span ng:bind="4+5">9</span>' +
+                                        '</div>' +
+                                      '</div>');
+    });
+
+
+    it('should compile only the element specified via autobind', function() {
+      dom.getElementById = function() {
+        return this.childNodes[1];
+      }
+
+      angularInit({autobind: 'child'}, dom);
+      expect(sortedHtml(dom)).toEqual('<div foo="{{1+2}}">{{2+3}}' +
+                                        '<div bar="7" id="child" ng:bind-attr="{"bar":"{{3+4}}"}">'+
+                                          '<span ng:bind="4+5">9</span>' +
+                                        '</div>' +
+                                      '</div>');
+    });
+
+
+    xit('should add custom css when specified via css', function() {
+      //TODO
+    });
+  });
+
+
   describe('angular service', function() {
     it('should override services', function() {
       var scope = createScope();