Skip to content

Commit 49bae13

Browse files
committed
fix(ngSrc, ngSrcset): only interpolate if all expressions are defined
BREAKING CHANGE If `bar` is `undefined`, before `<img src="foo/{{bar}}.jpg">` yields `<img src="foo/.jpg">`. With this change, the binding will not set `src`. If you want the old behavior, you can do this: `<img src="foo/{{bar || ''}}.jpg">`. The same applies for `srcset` as well. Closes angular#6984
1 parent 1dd67f2 commit 49bae13

File tree

3 files changed

+13
-6
lines changed

3 files changed

+13
-6
lines changed

src/ng/compile.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -1854,9 +1854,17 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
18541854
"ng- versions (such as ng-click instead of onclick) instead.");
18551855
}
18561856

1857+
var allOrNothingAttrs = [
1858+
'ngSrc',
1859+
'ngSrcset',
1860+
'src',
1861+
'srcset'
1862+
];
1863+
18571864
// we need to interpolate again, in case the attribute value has been updated
18581865
// (e.g. by another directive's compile function)
1859-
interpolateFn = $interpolate(attr[name], true, getTrustedContext(node, name));
1866+
interpolateFn = $interpolate(attr[name], true, getTrustedContext(node, name),
1867+
allOrNothingAttrs.indexOf(name) > -1);
18601868

18611869
// if attribute was updated so that there is no interpolation going on we don't want to
18621870
// register any observers

test/ng/directive/booleanAttrsSpec.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -202,9 +202,8 @@ describe('ngSrc', function() {
202202
describe('ngSrcset', function() {
203203
it('should interpolate the expression and bind to srcset', inject(function($compile, $rootScope) {
204204
var element = $compile('<div ng-srcset="some/{{id}} 2x"></div>')($rootScope);
205-
206205
$rootScope.$digest();
207-
expect(element.attr('srcset')).toEqual('some/ 2x');
206+
expect(element.attr('srcset')).toBeUndefined();
208207

209208
$rootScope.$apply(function() {
210209
$rootScope.id = 1;
@@ -227,7 +226,7 @@ describe('ngHref', function() {
227226
it('should interpolate the expression and bind to href', inject(function($compile, $rootScope) {
228227
element = $compile('<div ng-href="some/{{id}}"></div>')($rootScope);
229228
$rootScope.$digest();
230-
expect(element.attr('href')).toEqual('some/');
229+
expect(element.attr('href')).toBe('some/');
231230

232231
$rootScope.$apply(function() {
233232
$rootScope.id = 1;
@@ -258,7 +257,7 @@ describe('ngHref', function() {
258257
element = $compile('<svg><a ng-href="some/{{id}}"></a></svg>')($rootScope);
259258
var child = element.children('a');
260259
$rootScope.$digest();
261-
expect(child.attr('xlink:href')).toEqual('some/');
260+
expect(child.attr('xlink:href')).toBe('some/');
262261

263262
$rootScope.$apply(function() {
264263
$rootScope.id = 1;

test/ng/directive/ngSrcsetSpec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ describe('ngSrcset', function() {
1111
$rootScope.image = {};
1212
element = $compile('<img ng-srcset="{{image.url}} 2x">')($rootScope);
1313
$rootScope.$digest();
14-
expect(element.attr('srcset')).toEqual(' 2x');
14+
expect(element.attr('srcset')).toBeUndefined();
1515
}));
1616
});

0 commit comments

Comments
 (0)