From a08cbc02e78e789a66e9af771c410e8ad1646e25 Mon Sep 17 00:00:00 2001 From: Vojta Jina Date: Fri, 23 Mar 2012 15:53:04 -0700 Subject: feat($compile): do not interpolate boolean attributes, rather evaluate them So that we can have non string values, e.g. ng-value="true" for radio inputs Breaks boolean attrs are evaluated rather than interpolated To migrate your code, change: to: Affected directives: * ng-multiple * ng-selected * ng-checked * ng-disabled * ng-readonly * ng-required --- src/directive/booleanAttrDirs.js | 73 +++++++++++++++++++++++++++------------- 1 file changed, 49 insertions(+), 24 deletions(-) (limited to 'src/directive') diff --git a/src/directive/booleanAttrDirs.js b/src/directive/booleanAttrDirs.js index 10c6eee8..7da52db0 100644 --- a/src/directive/booleanAttrDirs.js +++ b/src/directive/booleanAttrDirs.js @@ -130,7 +130,7 @@ Click me to toggle:
- +
it('should toggle button', function() { @@ -142,7 +142,7 @@
* * @element INPUT - * @param {template} ng-disabled any string which can contain '{{}}' markup. + * @param {string} expression Angular expression that will be evaluated. */ @@ -160,7 +160,7 @@ Check me to check both:
- +
it('should check both checkBoxes', function() { @@ -172,7 +172,7 @@
* * @element INPUT - * @param {template} ng-checked any string which can contain '{{}}' markup. + * @param {string} expression Angular expression that will be evaluated. */ @@ -191,7 +191,7 @@ Check me check multiple:
- @@ -208,7 +208,7 @@
* * @element SELECT - * @param {template} ng-multiple any string which can contain '{{}}' markup. + * @param {string} expression Angular expression that will be evaluated. */ @@ -226,7 +226,7 @@ Check me to make text readonly:
- +
it('should toggle readonly attr', function() { @@ -238,7 +238,7 @@
* * @element INPUT - * @param {template} ng-readonly any string which can contain '{{}}' markup. + * @param {string} expression Angular expression that will be evaluated. */ @@ -255,35 +255,60 @@ * @example - Check me to select:
+ Check me to select:
it('should select Greetings!', function() { expect(element('.doc-example-live #greet').prop('selected')).toBeFalsy(); - input('checked').check(); + input('selected').check(); expect(element('.doc-example-live #greet').prop('selected')).toBeTruthy(); });
+ * * @element OPTION - * @param {template} ng-selected any string which can contain '{{}}' markup. + * @param {string} expression Angular expression that will be evaluated. */ - -function ngAttributeAliasDirective(propName, attrName) { - ngAttributeAliasDirectives[directiveNormalize('ng-' + attrName)] = valueFn( - function(scope, element, attr) { - attr.$observe(directiveNormalize('ng-' + attrName), function(value) { - attr.$set(attrName, value); - }); - } - ); -} var ngAttributeAliasDirectives = {}; -forEach(BOOLEAN_ATTR, ngAttributeAliasDirective); -ngAttributeAliasDirective(null, 'src'); + + +// boolean attrs are evaluated +forEach(BOOLEAN_ATTR, function(propName, attrName) { + var normalized = directiveNormalize('ng-' + attrName); + ngAttributeAliasDirectives[normalized] = function() { + return { + compile: function(tpl, attr) { + attr.$observers[attrName] = []; + return function(scope, element, attr) { + scope.$watch(attr[normalized], function(value) { + attr.$set(attrName, value); + }); + }; + } + }; + }; +}); + + +// ng-src, ng-href are interpolated +forEach(['src', 'href'], function(attrName) { + var normalized = directiveNormalize('ng-' + attrName); + ngAttributeAliasDirectives[normalized] = function() { + return { + compile: function(tpl, attr) { + attr.$observers[attrName] = []; + return function(scope, element, attr) { + attr.$observe(normalized, function(value) { + attr.$set(attrName, value); + }); + }; + } + }; + }; +}); -- cgit v1.2.3