diff options
| -rw-r--r-- | src/Angular.js | 45 | ||||
| -rw-r--r-- | src/angular-bootstrap.js | 2 | ||||
| -rw-r--r-- | src/angular.suffix | 2 | ||||
| -rw-r--r-- | test/AngularSpec.js | 54 |
4 files changed, 75 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); diff --git a/test/AngularSpec.js b/test/AngularSpec.js index e9215bee..f5556f7c 100644 --- 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(); |