diff options
Diffstat (limited to 'src/directives.js')
| -rw-r--r-- | src/directives.js | 111 |
1 files changed, 62 insertions, 49 deletions
diff --git a/src/directives.js b/src/directives.js index cabf0c23..ffe37890 100644 --- a/src/directives.js +++ b/src/directives.js @@ -1,10 +1,10 @@ -angularDirective("ng-init", function(expression){ +angularDirective("ng:init", function(expression){ return function(element){ this.$tryEval(expression, element); }; }); -angularDirective("ng-controller", function(expression){ +angularDirective("ng:controller", function(expression){ return function(element){ var controller = getter(window, expression, true) || getter(this, expression, true); if (!controller) @@ -16,22 +16,23 @@ angularDirective("ng-controller", function(expression){ }; }); -angularDirective("ng-eval", function(expression){ +angularDirective("ng:eval", function(expression){ return function(element){ this.$onEval(expression, element); }; }); -angularDirective("ng-bind", function(expression){ +angularDirective("ng:bind", function(expression){ return function(element) { var lastValue = noop, lastError = noop; this.$onEval(function() { - var error, - value = this.$tryEval(expression, function(e){ - error = toJson(e); - }), - isHtml, - isDomElement; + var error, value, isHtml, isDomElement, + oldElement = this.hasOwnProperty('$element') ? this.$element : undefined; + this.$element = element; + value = this.$tryEval(expression, function(e){ + error = toJson(e); + }); + this.$element = oldElement; if (lastValue === value && lastError == error) return; isHtml = value instanceof HTML, isDomElement = isElement(value); @@ -74,7 +75,9 @@ function compileBindTemplate(template){ }); }); bindTemplateCache[template] = fn = function(element){ - var parts = [], self = this; + var parts = [], self = this, + oldElement = this.hasOwnProperty('$element') ? self.$element : undefined; + self.$element = element; for ( var i = 0; i < bindings.length; i++) { var value = bindings[i].call(self, element); if (isElement(value)) @@ -83,13 +86,14 @@ function compileBindTemplate(template){ value = toJson(value, true); parts.push(value); }; + self.$element = oldElement; return parts.join(''); }; } return fn; } -angularDirective("ng-bind-template", function(expression){ +angularDirective("ng:bind-template", function(expression){ var templateFn = compileBindTemplate(expression); return function(element) { var lastValue; @@ -108,7 +112,7 @@ var REMOVE_ATTRIBUTES = { 'readonly':'readOnly', 'checked':'checked' }; -angularDirective("ng-bind-attr", function(expression){ +angularDirective("ng:bind-attr", function(expression){ return function(element){ var lastValue = {}; this.$onEval(function(){ @@ -134,17 +138,17 @@ angularDirective("ng-bind-attr", function(expression){ }; }); -angularWidget("@ng-non-bindable", noop); +angularWidget("@ng:non-bindable", noop); -angularWidget("@ng-repeat", function(expression, element){ - element.removeAttr('ng-repeat'); - element.replaceWith(this.comment("ng-repeat: " + expression)); +angularWidget("@ng:repeat", function(expression, element){ + element.removeAttr('ng:repeat'); + element.replaceWith(this.comment("ng:repeat: " + expression)); var template = this.compile(element); return function(reference){ var match = expression.match(/^\s*(.+)\s+in\s+(.*)\s*$/), lhs, rhs, valueIdent, keyIdent; if (! match) { - throw "Expected ng-repeat in form of 'item in collection' but got '" + + throw "Expected ng:repeat in form of 'item in collection' but got '" + expression + "'."; } lhs = match[1]; @@ -157,32 +161,32 @@ angularWidget("@ng-repeat", function(expression, element){ valueIdent = match[3] || match[1]; keyIdent = match[2]; - if (isUndefined(this.$eval(rhs))) this.$set(rhs, []); - var children = [], currentScope = this; this.$onEval(function(){ var index = 0, childCount = children.length, childScope, lastElement = reference, - collection = this.$tryEval(rhs, reference); + collection = this.$tryEval(rhs, reference), is_array = isArray(collection); for ( var key in collection) { - if (index < childCount) { - // reuse existing child - childScope = children[index]; - childScope[valueIdent] = collection[key]; - if (keyIdent) childScope[keyIdent] = key; - } else { - // grow children - childScope = template(element.clone(), createScope(currentScope)); - childScope[valueIdent] = collection[key]; - if (keyIdent) childScope[keyIdent] = key; - lastElement.after(childScope.$element); - childScope.$index = index; - childScope.$element.attr('ng-repeat-index', index); - childScope.$init(); - children.push(childScope); + if (!is_array || collection.hasOwnProperty(key)) { + if (index < childCount) { + // reuse existing child + childScope = children[index]; + childScope[valueIdent] = collection[key]; + if (keyIdent) childScope[keyIdent] = key; + } else { + // grow children + childScope = template(element.clone(), createScope(currentScope)); + childScope[valueIdent] = collection[key]; + if (keyIdent) childScope[keyIdent] = key; + lastElement.after(childScope.$element); + childScope.$index = index; + childScope.$element.attr('ng:repeat-index', index); + childScope.$init(); + children.push(childScope); + } + childScope.$eval(); + lastElement = childScope.$element; + index ++; } - childScope.$eval(); - lastElement = childScope.$element; - index ++; }; // shrink children while(children.length > index) { @@ -192,7 +196,7 @@ angularWidget("@ng-repeat", function(expression, element){ }; }); -angularDirective("ng-click", function(expression, element){ +angularDirective("ng:click", function(expression, element){ return function(element){ var self = this; element.bind('click', function(){ @@ -203,7 +207,7 @@ angularDirective("ng-click", function(expression, element){ }; }); -angularDirective("ng-watch", function(expression, element){ +angularDirective("ng:watch", function(expression, element){ return function(element){ var self = this; new Parser(expression).watch()({ @@ -221,8 +225,8 @@ function ngClass(selector) { var existing = element[0].className + ' '; return function(element){ this.$onEval(function(){ - var value = this.$eval(expression); if (selector(this.$index)) { + var value = this.$eval(expression); if (isArray(value)) value = value.join(' '); element[0].className = trim(existing + value); } @@ -231,11 +235,11 @@ function ngClass(selector) { }; } -angularDirective("ng-class", ngClass(function(){return true;})); -angularDirective("ng-class-odd", ngClass(function(i){return i % 2 === 0;})); -angularDirective("ng-class-even", ngClass(function(i){return i % 2 === 1;})); +angularDirective("ng:class", ngClass(function(){return true;})); +angularDirective("ng:class-odd", ngClass(function(i){return i % 2 === 0;})); +angularDirective("ng:class-even", ngClass(function(i){return i % 2 === 1;})); -angularDirective("ng-show", function(expression, element){ +angularDirective("ng:show", function(expression, element){ return function(element){ this.$onEval(function(){ element.css('display', toBoolean(this.$eval(expression)) ? '' : 'none'); @@ -243,7 +247,7 @@ angularDirective("ng-show", function(expression, element){ }; }); -angularDirective("ng-hide", function(expression, element){ +angularDirective("ng:hide", function(expression, element){ return function(element){ this.$onEval(function(){ element.css('display', toBoolean(this.$eval(expression)) ? 'none' : ''); @@ -251,10 +255,19 @@ angularDirective("ng-hide", function(expression, element){ }; }); -angularDirective("ng-style", function(expression, element){ +angularDirective("ng:style", function(expression, element){ return function(element){ + var resetStyle = getStyle(element); this.$onEval(function(){ - element.css(this.$eval(expression)); + var style = this.$eval(expression) || {}, key, mergedStyle = {}; + for(key in style) { + if (resetStyle[key] === undefined) resetStyle[key] = ''; + mergedStyle[key] = style[key]; + } + for(key in resetStyle) { + mergedStyle[key] = mergedStyle[key] || resetStyle[key]; + } + element.css(mergedStyle); }, element); }; }); |
