angular.js/src/directives.js

245 lines
6.9 KiB
JavaScript
Raw Normal View History

2010-03-22 20:58:04 +00:00
angularDirective("ng-init", function(expression){
2010-03-26 05:03:11 +00:00
return function(element){
this.$tryEval(expression, element);
2010-03-16 17:30:26 +00:00
};
});
2010-04-06 04:26:52 +00:00
angularDirective("ng-controller", function(expression){
return function(element){
var controller = getter(window, expression, true) || getter(this, expression, true);
if (!controller)
throw "Can not find '"+expression+"' controller.";
if (!isFunction(controller))
throw "Reference '"+expression+"' is not a class.";
this.$become(controller);
2010-04-07 17:17:15 +00:00
(this.init || noop)();
2010-04-06 04:26:52 +00:00
};
});
2010-03-22 20:58:04 +00:00
angularDirective("ng-eval", function(expression){
2010-03-26 05:03:11 +00:00
return function(element){
this.$onEval(expression, element);
};
2010-03-16 17:30:26 +00:00
});
2010-03-22 22:46:34 +00:00
angularDirective("ng-bind", function(expression){
2010-03-22 20:58:04 +00:00
return function(element) {
var lastValue, lastError;
this.$onEval(function() {
var error, value = this.$tryEval(expression, function(e){
error = toJson(e);
});
if (value != lastValue || error != lastError) {
lastValue = value;
lastError = error;
elementError(element, NG_EXCEPTION, error);
if (error) value = error;
if (isElement(value)) {
element.html('');
element.append(value);
} else {
element.text(value);
}
}
2010-03-26 05:03:11 +00:00
}, element);
2010-03-16 17:30:26 +00:00
};
});
2010-03-23 21:57:11 +00:00
var bindTemplateCache = {};
function compileBindTemplate(template){
var fn = bindTemplateCache[template];
if (!fn) {
var bindings = [];
foreach(parseBindings(template), function(text){
var exp = binding(text);
2010-03-31 20:57:25 +00:00
bindings.push(exp ? function(element){
var error, value = this.$tryEval(exp, function(e){
error = toJson(e);
});
elementError(element, NG_EXCEPTION, error);
return error ? error : value;
} : function() {
2010-03-23 21:57:11 +00:00
return text;
});
});
2010-03-31 20:57:25 +00:00
bindTemplateCache[template] = fn = function(element){
2010-03-23 21:57:11 +00:00
var parts = [], self = this;
foreach(bindings, function(fn){
2010-03-31 20:57:25 +00:00
var value = fn.call(self, element);
if (isElement(value))
value = '';
else if (isObject(value))
value = toJson(value, true);
parts.push(value);
2010-03-23 21:57:11 +00:00
});
return parts.join('');
};
}
return fn;
2010-04-04 00:04:36 +00:00
}
2010-03-23 21:57:11 +00:00
angularDirective("ng-bind-template", function(expression){
var templateFn = compileBindTemplate(expression);
return function(element) {
var lastValue;
2010-03-26 05:03:11 +00:00
this.$onEval(function() {
2010-03-31 20:57:25 +00:00
var value = templateFn.call(this, element);
2010-03-23 21:57:11 +00:00
if (value != lastValue) {
element.text(value);
lastValue = value;
}
2010-03-26 05:03:11 +00:00
}, element);
2010-03-23 21:57:11 +00:00
};
});
var REMOVE_ATTRIBUTES = {
'disabled':true,
'readonly':true,
'checked':true
};
2010-03-22 22:46:34 +00:00
angularDirective("ng-bind-attr", function(expression){
2010-03-22 20:58:04 +00:00
return function(element){
2010-03-26 05:03:11 +00:00
this.$onEval(function(){
2010-03-30 21:55:04 +00:00
foreach(this.$eval(expression), function(bindExp, key) {
2010-03-31 20:57:25 +00:00
var value = compileBindTemplate(bindExp).call(this, element);
2010-04-16 21:01:29 +00:00
if (REMOVE_ATTRIBUTES[lowercase(key)]) {
if (!toBoolean(value)) {
element.removeAttr('disabled');
} else {
element.attr(key, value);
}
(element.data('$validate')||noop)();
2010-03-30 21:55:04 +00:00
} else {
element.attr(key, value);
}
2010-03-23 21:57:11 +00:00
}, this);
2010-03-26 05:03:11 +00:00
}, element);
2010-03-16 17:30:26 +00:00
};
});
2010-03-30 21:55:04 +00:00
angularWidget("@ng-non-bindable", noop);
2010-03-22 20:58:04 +00:00
2010-03-30 21:55:04 +00:00
angularWidget("@ng-repeat", function(expression, element){
2010-03-26 05:03:11 +00:00
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 '" +
2010-03-22 22:46:34 +00:00
expression + "'.";
2010-03-26 05:03:11 +00:00
}
lhs = match[1];
rhs = match[2];
match = lhs.match(/^([\$\w]+)|\(([\$\w]+)\s*,\s*([\$\w]+)\)$/);
if (!match) {
throw "'item' in 'item in collection' should be identifier or (key, value) but got '" +
2010-03-22 22:46:34 +00:00
keyValue + "'.";
2010-03-26 05:03:11 +00:00
}
valueIdent = match[3] || match[1];
keyIdent = match[2];
2010-03-22 22:46:34 +00:00
2010-03-30 21:55:04 +00:00
if (isUndefined(this.$eval(rhs))) this.$set(rhs, []);
2010-03-26 05:03:11 +00:00
var children = [], currentScope = this;
this.$onEval(function(){
2010-03-22 20:58:04 +00:00
var index = 0, childCount = children.length, childScope, lastElement = reference;
2010-03-26 05:03:11 +00:00
foreach(this.$tryEval(rhs, reference), function(value, key){
2010-03-30 21:55:04 +00:00
function assign(scope) {
scope[valueIdent] = value;
if (keyIdent) scope[keyIdent] = key;
}
2010-03-22 20:58:04 +00:00
if (index < childCount) {
// reuse existing child
2010-03-30 21:55:04 +00:00
assign(childScope = children[index]);
2010-03-22 20:58:04 +00:00
} else {
// grow children
2010-04-04 00:04:36 +00:00
assign(childScope = template(element.clone(), createScope(currentScope)));
2010-03-26 05:03:11 +00:00
lastElement.after(childScope.$element);
childScope.$index = index;
2010-03-30 21:55:04 +00:00
childScope.$element.attr('ng-repeat-index', index);
2010-03-26 05:03:11 +00:00
childScope.$init();
2010-03-22 20:58:04 +00:00
children.push(childScope);
}
2010-03-26 05:03:11 +00:00
childScope.$eval();
lastElement = childScope.$element;
2010-03-22 20:58:04 +00:00
index ++;
2010-03-16 17:30:26 +00:00
});
2010-03-22 20:58:04 +00:00
// shrink children
while(children.length > index) {
2010-03-26 05:03:11 +00:00
children.pop().$element.remove();
2010-03-22 20:58:04 +00:00
}
2010-03-26 05:03:11 +00:00
}, reference);
2010-03-16 17:30:26 +00:00
};
2010-03-30 21:55:04 +00:00
});
2010-03-22 20:58:04 +00:00
2010-03-31 20:57:25 +00:00
angularDirective("ng-click", function(expression, element){
2010-03-26 05:03:11 +00:00
return function(element){
var self = this;
element.click(function(){
2010-03-26 05:03:11 +00:00
self.$tryEval(expression, element);
2010-04-04 00:04:36 +00:00
self.$root.$eval();
2010-03-31 20:57:25 +00:00
return false;
});
};
});
2010-03-22 23:07:42 +00:00
angularDirective("ng-watch", function(expression, element){
2010-03-26 05:03:11 +00:00
return function(element){
2010-03-30 21:55:04 +00:00
var self = this;
new Parser(expression).watch()({
scope:{get: self.$get, set: self.$set},
addListener:function(watch, exp){
self.$watch(watch, function(){
return exp({scope:{get: self.$get, set: self.$set}, state:self});
}, element);
}
});
2010-03-22 23:07:42 +00:00
};
});
2010-03-23 04:29:57 +00:00
function ngClass(selector) {
return function(expression, element){
var existing = element[0].className + ' ';
return function(element){
2010-03-26 05:03:11 +00:00
this.$onEval(function(){
var value = this.$eval(expression);
2010-03-23 04:29:57 +00:00
if (selector(this.$index)) {
if (isArray(value)) value = value.join(' ');
2010-03-31 20:57:25 +00:00
element[0].className = trim(existing + value);
2010-03-23 04:29:57 +00:00
}
2010-03-26 05:03:11 +00:00
}, element);
2010-03-23 04:29:57 +00:00
};
};
}
angularDirective("ng-class", ngClass(function(){return true;}));
2010-04-04 00:04:36 +00:00
angularDirective("ng-class-odd", ngClass(function(i){return i % 2 === 0;}));
angularDirective("ng-class-even", ngClass(function(i){return i % 2 === 1;}));
2010-03-22 20:58:04 +00:00
2010-03-23 04:29:57 +00:00
angularDirective("ng-show", function(expression, element){
return function(element){
2010-03-26 05:03:11 +00:00
this.$onEval(function(){
element.css('display', toBoolean(this.$eval(expression)) ? '' : 'none');
}, element);
2010-03-23 04:29:57 +00:00
};
});
angularDirective("ng-hide", function(expression, element){
return function(element){
2010-03-26 05:03:11 +00:00
this.$onEval(function(){
element.css('display', toBoolean(this.$eval(expression)) ? 'none' : '');
}, element);
2010-03-23 04:29:57 +00:00
};
});
2010-03-16 17:30:26 +00:00
2010-03-23 21:57:11 +00:00
angularDirective("ng-style", function(expression, element){
return function(element){
2010-03-26 05:03:11 +00:00
this.$onEval(function(){
element.css(this.$eval(expression));
}, element);
2010-03-23 21:57:11 +00:00
};
});
2010-03-16 20:50:47 +00:00