Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-17 07:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ng:autobind now optionally takes element id

Browse source 
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>
This commit is contained in:
Igor Minar 2011-03-10 14:26:22 -08:00
parent 7414e7b533
commit 9d5c533791
4 changed files with 75 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/Angular.js
View file

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

2
src/angular-bootstrap.js vendored
View file

@ -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){

2
src/angular.suffix
View file

@ -1,6 +1,6 @@
jqLiteWrap(document).ready(function(){
angularInit(angularJsConfig(document));
angularInit(angularJsConfig(document), document);
});
})(window, document);

54
test/AngularSpec.js
View file

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