Skip to content
Permalink
Browse files

refactor(ngBindAttr): remove

Breaks ng-bind-attr directive removed
  • Loading branch information...
vojtajina committed Mar 23, 2012
1 parent 09e175f commit 55027132f3d57e5dcf94683e6e6bd7b0aae0087d
Showing with 0 additions and 166 deletions.
  1. +0 −1 src/AngularPublic.js
  2. +0 −95 src/directive/ngBind.js
  3. +0 −37 test/BinderSpec.js
  4. +0 −33 test/directive/ngBindSpec.js
@@ -74,7 +74,6 @@ function publishExternalAPI(angular){
ngBindHtml: ngBindHtmlDirective,
ngBindHtmlUnsafe: ngBindHtmlUnsafeDirective,
ngBindTemplate: ngBindTemplateDirective,
ngBindAttr: ngBindAttrDirective,
ngClass: ngClassDirective,
ngClassEven: ngClassEvenDirective,
ngClassOdd: ngClassOddDirective,
@@ -153,98 +153,3 @@ var ngBindTemplateDirective = ['$interpolate', function($interpolate) {
});
}
}];


/**
* @ngdoc directive
* @name angular.module.ng.$compileProvider.directive.ng-bind-attr
* @restrict A
*
* @description
* The `ng-bind-attr` attribute specifies that a
* {@link guide/dev_guide.templates.databinding databinding} should be created between a particular
* element attribute and a given expression. Unlike `ng-bind`, the `ng-bind-attr` contains one or
* more JSON key value pairs; each pair specifies an attribute and the
* {@link guide/dev_guide.expressions expression} to which it will be mapped.
*
* Instead of writing `ng-bind-attr` statements in your HTML, you can use double-curly markup to
* specify an <tt ng-non-bindable>{{expression}}</tt> for the value of an attribute.
* At compile time, the attribute is translated into an
* `<span ng-bind-attr="{attr:expression}"></span>`.
*
* The following HTML snippet shows how to specify `ng-bind-attr`:
* <pre>
* <a ng-bind-attr='{"href":"http://www.google.com/search?q={{query}}"}'>Google</a>
* </pre>
*
* This is cumbersome, so as we mentioned using double-curly markup is a prefered way of creating
* this binding:
* <pre>
* <a href="http://www.google.com/search?q={{query}}">Google</a>
* </pre>
*
* During compilation, the template with attribute markup gets translated to the ng-bind-attr form
* mentioned above.
*
* _Note_: You might want to consider using {@link angular.module.ng.$compileProvider.directive.ng-href ng-href} instead of
* `href` if the binding is present in the main application template (`index.html`) and you want to
* make sure that a user is not capable of clicking on raw/uncompiled link.
*
*
* @element ANY
* @param {string} ng-bind-attr one or more JSON key-value pairs representing
* the attributes to replace with expressions. Each key matches an attribute
* which needs to be replaced. Each value is a text template of
* the attribute with the embedded
* <tt ng-non-bindable>{{expression}}</tt>s. Any number of
* key-value pairs can be specified.
*
* @example
* Enter a search string in the Live Preview text box and then click "Google". The search executes instantly.
<doc:example>
<doc:source>
<script>
function Ctrl($scope) {
$scope.query = 'AngularJS';
}
</script>
<div ng-controller="Ctrl">
Google for:
<input type="text" ng-model="query" ng-model-instant>
<a ng-bind-attr='{"href":"http://www.google.com/search?q={{query}}"}'>
Google
</a> (ng-bind-attr) |
<a href="http://www.google.com/search?q={{query}}">Google</a>
(curly binding in attribute val)
</div>
</doc:source>
<doc:scenario>
it('should check ng-bind-attr', function() {
expect(using('.doc-example-live').element('a').attr('href')).
toBe('http://www.google.com/search?q=AngularJS');
using('.doc-example-live').input('query').enter('google');
expect(using('.doc-example-live').element('a').attr('href')).
toBe('http://www.google.com/search?q=google');
});
</doc:scenario>
</doc:example>
*/

var ngBindAttrDirective = ['$interpolate', function($interpolate) {
return function(scope, element, attr) {
var lastValue = {};
var interpolateFns = {};
scope.$watch(function() {
var values = scope.$eval(attr.ngBindAttr);
for(var key in values) {
var exp = values[key],
fn = (interpolateFns[exp] ||
(interpolateFns[values[key]] = $interpolate(exp))),
value = fn(scope);
if (lastValue[key] !== value) {
attr.$set(key, lastValue[key] = value);
}
}
});
}
}];
@@ -49,20 +49,6 @@ describe('Binder', function() {
expect(element.text()).toBe('123');
}));

it('AttributesNoneBound', inject(function($rootScope, $compile) {
var a = $compile('<a href="abc" foo="def"></a>')($rootScope);
expect(a[0].nodeName).toBe('A');
expect(a.attr('ng-bind-attr')).toBeFalsy();
}));

it('AttributesAreEvaluated', inject(function($rootScope, $compile) {
var a = $compile('<a ng-bind-attr=\'{"a":"a", "b":"a+b={{a+b}}"}\'></a>')($rootScope);
$rootScope.$eval('a=1;b=2');
$rootScope.$apply();
expect(a.attr('a')).toBe('a');
expect(a.attr('b')).toBe('a+b=3');
}));

it('InputTypeButtonActionExecutesInScope', inject(function($rootScope, $compile) {
var savedCalled = false;
element = $compile(
@@ -414,29 +400,6 @@ describe('Binder', function() {
expect(optionC.text()).toEqual('C');
}));

it('DeleteAttributeIfEvaluatesFalse', inject(function($rootScope, $compile) {
element = $compile(
'<div>' +
'<input ng-model="a0" ng-bind-attr="{disabled:\'{{true}}\'}">' +
'<input ng-model="a1" ng-bind-attr="{disabled:\'{{false}}\'}">' +
'<input ng-model="b0" ng-bind-attr="{disabled:\'{{1}}\'}">' +
'<input ng-model="b1" ng-bind-attr="{disabled:\'{{0}}\'}">' +
'<input ng-model="c0" ng-bind-attr="{disabled:\'{{[0]}}\'}">' +
'<input ng-model="c1" ng-bind-attr="{disabled:\'{{[]}}\'}">' +
'</div>')($rootScope);
$rootScope.$apply();
function assertChild(index, disabled) {
expect(!!childNode(element, index).attr('disabled')).toBe(disabled);
}

assertChild(0, true);
assertChild(1, false);
assertChild(2, true);
assertChild(3, false);
assertChild(4, true);
assertChild(5, false);
}));

it('ItShouldSelectTheCorrectRadioBox', inject(function($rootScope, $compile) {
element = $compile(
'<div>' +
@@ -77,37 +77,4 @@ describe('ng-bind-*', function() {
expect(fromJson(element.text())).toEqual({key:'value'});
}));
});


describe('ng-bind-attr', function() {
it('should bind attributes', inject(function($rootScope, $compile) {
element = $compile('<div ng-bind-attr="{src:\'http://localhost/mysrc\', alt:\'myalt\'}"/>')($rootScope);
$rootScope.$digest();
expect(element.attr('src')).toEqual('http://localhost/mysrc');
expect(element.attr('alt')).toEqual('myalt');
}));

it('should not pretty print JSON in attributes', inject(function($rootScope, $compile) {
element = $compile('<img alt="{{ {a:1} }}"/>')($rootScope);
$rootScope.$digest();
expect(element.attr('alt')).toEqual('{"a":1}');
}));

it('should remove special attributes on false', inject(function($rootScope, $compile) {
element = $compile('<input ng-bind-attr="{disabled:\'{{disabled}}\', readonly:\'{{readonly}}\', checked:\'{{checked}}\'}"/>')($rootScope);
var input = element[0];
expect(input.disabled).toEqual(false);
expect(input.readOnly).toEqual(false);
expect(input.checked).toEqual(false);

$rootScope.disabled = true;
$rootScope.readonly = true;
$rootScope.checked = true;
$rootScope.$digest();

expect(input.disabled).toEqual(true);
expect(input.readOnly).toEqual(true);
expect(input.checked).toEqual(true);
}));
});
});

0 comments on commit 5502713

Please sign in to comment.
You can’t perform that action at this time.