Angular.js: With AngularJS 1.7 the data-src attribute of an image gets automatically replaced

Created on 16 Oct 2018 · 7Comments · Source: angular/angular.js

I'm submitting a ...

[x] bug report

Current behavior:
The data-src attribute of an image gets replaced with the value of the src attribute

Expected:
The data-src attribute contains the original value.
As the image is plain HTML, and has no obvious directives bound to it, I would expect that nothing is changed for this element. With version 1.7 this somehow changed.

Steps to reproduce
See Plunker (http://plnkr.co/edit/bpouxUmsXretMfcb)

With AngularJS version 1.7 the data-src attribute changes to the value of the src attribute (Red border)
With AngularJS version 1.6 the data-src attribute contains the original value (Green border)

AngularJS version: 1.7.x
Browser: all

$compile regression bug

Source

fbrandel

Most helpful comment

Thanks for testing with your scenario. We should be able to merge this soon and hopefully have a new release out early next week.

petebacondarwin on 25 Oct 2018

👍2

All 7 comments

This was introduced in https://github.com/angular/angular.js/commit/dedb10c0b89a92f5c43b4c4d3f1054cd8179a58e by our work on adding support for arbitrary property and event bindings.

It seems that we map src and data-src to the same src property on $attrs - then there is a watch handler on the src value, which then writes back to src and data-src.

Any thoughts @jbedard?

petebacondarwin on 16 Oct 2018

@petebacondarwin you sure it was dedb10c0b89a92f5c43b4c4d3f1054cd8179a58e not something earlier like 1e9eadcd72dbbd5c67dae8328a63e535cfa91ff9? From a quick test the plnkr seems to still have the issue when changing to v1.7.0 but not v1.6.10... (either way I'm interested in investigating more).

From my initial investigation... seems like we're settings 2 $interpolate watchers on the img[src]. One reads img[src], one reads img[data-src] and both assign to the src. In this case data-src just happens to come second and overwrites the first.

I'm pretty sure we shouldn't even be creating that interpolate directive since there's no interpolation in those attributes. But the trustedContext is "mediaUrl" (since 1e9eadcd72dbbd5c67dae8328a63e535cfa91ff9?) so contextAllowsConcatenation is true and we don't exit. Do we need an interpolate function on a constant/no-interpolation src property? What should a constant/no-interpolation data- prefixed attribute do?