mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-16 23:30:23 +00:00
refactor(ngBindAttr): remove
Breaks ng-bind-attr directive removed
This commit is contained in:
Vojta Jina
parent
09e175f02c
commit
55027132f3
4 changed files with 0 additions and 166 deletions
|
|
@ -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);
|
||||
}));
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue