Fix failing tests for ie, and mark elements as ng-widget, ng-directive, and ng-binding

This commit is contained in:
Misko Hevery 2010-10-26 22:02:24 -07:00
parent c67af8a038
commit 62c0e5c460
10 changed files with 88 additions and 21 deletions

3
.gitignore vendored
View file

@ -1,4 +1,5 @@
build/
angularjs.netrc
jstd.log
.DS_Store
.DS_Store
regression/temp.html

21
docs/filter:currency.html Normal file
View file

@ -0,0 +1,21 @@
<h1>filter:currency</h1>
<p>formats a number as a currency (ie $1,234.56)</p>
<p>@format <em>expression</em> | currency</p>
<p><example>
<input type="text" name="amount" value="1234.56"/> <br/>
{{amount | currency}}
</example></p>
<p><test>
it('should init with 1234.56', function(){
expect(bind('amount')).toEqual('$1,234.56');
});
it('should update', function(){
element(':input[name=amount]').value('-1234');
expect(bind('amount')).toEqual('-$1,234.00');
expect(bind('amount')).toHaveColor('red');
});
</test></p>

20
docs/filter:currency.md Normal file
View file

@ -0,0 +1,20 @@
# filter:currency
formats a number as a currency (ie $1,234.56)
@format _expression_ | currency
<example>
<input type="text" name="amount" value="1234.56"/> <br/>
{{amount | currency}}
</example>
<test>
it('should init with 1234.56', function(){
expect(bind('amount')).toEqual('$1,234.56');
});
it('should update', function(){
element(':input[name=amount]').value('-1234');
expect(bind('amount')).toEqual('-$1,234.00');
expect(bind('amount')).toHaveColor('red');
});
</test>

View file

@ -112,9 +112,11 @@ Compiler.prototype = {
templatize: function(element, elementIndex, priority){
var self = this,
widget,
fn,
directiveFns = self.directives,
descend = true,
directives = true,
elementName = nodeName(element),
template,
selfApi = {
compile: bind(self, self.compile),
@ -138,12 +140,15 @@ Compiler.prototype = {
eachAttribute(element, function(value, name){
if (!widget) {
if (widget = self.widgets('@' + name)) {
element.addClass('ng-attr-widget');
widget = bind(selfApi, widget, value, element);
}
}
});
if (!widget) {
if (widget = self.widgets(nodeName(element))) {
if (widget = self.widgets(elementName)) {
if (elementName.indexOf(':') > 0)
element.addClass('ng-widget');
widget = bind(selfApi, widget, element);
}
}
@ -179,7 +184,11 @@ Compiler.prototype = {
});
});
eachAttribute(element, function(value, name){
template.addInit((directiveFns[name]||noop).call(selfApi, value, element));
fn = directiveFns[name];
if (fn) {
element.addClass('ng-directive');
template.addInit((directiveFns[name]).call(selfApi, value, element));
}
});
}
// Process non text child nodes

View file

@ -22,7 +22,8 @@ angularDirective("ng:eval", function(expression){
};
});
angularDirective("ng:bind", function(expression){
angularDirective("ng:bind", function(expression, element){
element.addClass('ng-binding');
return function(element) {
var lastValue = noop, lastError = noop;
this.$onEval(function() {
@ -97,7 +98,8 @@ function compileBindTemplate(template){
return fn;
}
angularDirective("ng:bind-template", function(expression){
angularDirective("ng:bind-template", function(expression, element){
element.addClass('ng-binding');
var templateFn = compileBindTemplate(expression);
return function(element) {
var lastValue;

View file

@ -86,17 +86,21 @@ angular.scenario.dsl('using', function() {
* binding(name) returns the value of a binding
*/
angular.scenario.dsl('binding', function() {
function contains(text, value) {
return text && text.indexOf(value) >=0;
}
return function(name) {
return this.addFutureAction("select binding '" + name + "'", function($window, $document, done) {
var element;
try {
element = $document.elements('[ng\\:bind-template*="{{$1}}"]', name);
} catch(e) {
if (e.type !== 'selector')
throw e;
element = $document.elements('[ng\\:bind="$1"]', name);
var elements = $document.elements('.ng-binding');
for ( var i = 0; i < elements.length; i++) {
var element = new elements.init(elements[i]);
if (contains(element.attr('ng:bind'), name) >= 0 ||
contains(element.attr('ng:bind-template'), name) >= 0) {
done(null, element.text());
return;
}
}
done(null, element.text());
throw "Could not find binding: " + name;
});
};
});

View file

@ -46,6 +46,7 @@ describe('compiler', function(){
var init = template(e).$init;
expect(log).toEqual("found");
init();
expect(e.hasClass('ng-directive')).toEqual(true);
expect(log).toEqual("found:init");
});
@ -102,12 +103,13 @@ describe('compiler', function(){
}
});
var scope = compile('before<span>middle</span>after');
expect(lowercase(scope.$element[0].innerHTML)).toEqual('before<span hello="middle">replaced</span>after');
expect(sortedHtml(scope.$element[0], true)).toEqual('<div>before<span class="ng-directive" hello="middle">replaced</span>after</div>');
expect(log).toEqual("hello middle");
});
it('should replace widgets', function(){
widgets['NG:BUTTON'] = function(element) {
expect(element.hasClass('ng-widget')).toEqual(true);
element.replaceWith('<div>button</div>');
return function(element) {
log += 'init';
@ -120,6 +122,8 @@ describe('compiler', function(){
it('should use the replaced element after calling widget', function(){
widgets['H1'] = function(element) {
// HTML elements which are augmented by acting as widgets, should not be marked as so
expect(element.hasClass('ng-widget')).toEqual(false);
var span = angular.element('<span>{{1+2}}</span>');
element.replaceWith(span);
this.descend(true);

View file

@ -35,6 +35,7 @@ describe("directives", function(){
expect(element.text()).toEqual('');
scope.a = 'misko';
scope.$eval();
expect(element.hasClass('ng-binding')).toEqual(true);
expect(element.text()).toEqual('misko');
});
@ -87,6 +88,7 @@ describe("directives", function(){
var scope = compile('<div ng:bind-template="Hello {{name}}!"></div>');
scope.$set('name', 'Misko');
scope.$eval();
expect(element.hasClass('ng-binding')).toEqual(true);
expect(element.text()).toEqual('Hello Misko!');
});

View file

@ -260,15 +260,13 @@ describe("angular.scenario.dsl", function() {
describe('Binding', function() {
it('should select binding by name', function() {
if (msie) return; // TODO reenable!
doc.append('<span ng:bind="foo.bar">some value</span>');
doc.append('<span class="ng-binding" ng:bind="foo.bar">some value</span>');
$root.dsl.binding('foo.bar');
expect($root.futureResult).toEqual('some value');
});
it('should select binding in template by name', function() {
if (msie) return; // TODO reenable!
doc.append('<pre ng:bind-template="foo {{bar}} baz">foo some baz</pre>');
doc.append('<pre class="ng-binding" ng:bind-template="foo {{bar}} baz">foo some baz</pre>');
$root.dsl.binding('bar');
expect($root.futureResult).toEqual('foo some baz');
});

View file

@ -81,7 +81,7 @@ extend(angular, {
});
function sortedHtml(element) {
function sortedHtml(element, showNgClass) {
var html = "";
foreach(jqLite(element), function toString(node) {
if (node.nodeName == "#text") {
@ -93,8 +93,14 @@ function sortedHtml(element) {
html += '<' + node.nodeName.toLowerCase();
var attributes = node.attributes || [];
var attrs = [];
if (node.className)
attrs.push(' class="' + node.className + '"');
var className = node.className || '';
if (!showNgClass) {
className = className.replace(/ng-[\w-]+\s*/g, '');
}
className = trim(className);
if (className) {
attrs.push(' class="' + className + '"');
}
for(var i=0; i<attributes.length; i++) {
var attr = attributes[i];
if(attr.name.match(/^ng:/) ||