10 $digest() iterations reached using $sce.trustAsResourceUrl with angularjs 1.7.0

[einarstubhaug]

• bug report
• feature request
• other

Current behavior:
10 $digest() iterations reached using $sce.trustAsResourceUrl inside isolate scope directive 1.7.0

Minimal reproduction of the problem with instructions:

Markup in template:
<img ng-src="{{getThumbnailImageUrl(imgId)}}">
Corresponding controller function:
scope.getThumbnailImageUrl = function(id) {return $sce.trustAsResourceUrl(someService.someUrl(id)); }}

AngularJS version: 1.7.0

Browser: Tested in Version 67.0.3396.79 of Chrome

Anything else:
Seems like this regression has happened before: #3932
Is it a breaking change in version 1.7.0 or is it a regression that will be fixed?

[gkalpak]

This is probably a result of 1e9eadc. Not sure if it is an intentional change or not.
@petebacondarwin should know more 😁

[petebacondarwin]

As described in #3932 this is because the trusted object is newly created every time and we are checking the object identity in the ngSrc watcher.

Also @chirayuk's comment is valid here: #4045 (comment)

So one workaround would be:

<img ng-src="{{imgThumb}}">

scope.$watch('imgId', function(id) {
  scope.imgThumb = $sce.trustAsResourceUrl(someService.someUrl(id));
});

This way the trusted value is only computed when the imgId changes. So it should be stable in the interpolation watcher.

This would also have the benefit of not creating a new trusted object on every digest.

Here is an example: http://plnkr.co/edit/EV103OjPUg0TTlEVCPwv?p=preview

[petebacondarwin]

Although Chirayu "fixed" this for ngBindHtml (it was still called ngBind that time) it was accepted that people would be careful when binding trusted values. I think that the workaround given here is safer.

[Narretz]

We should probably still add this to the CL, as it didn't happen before 1.7.0