Skip to main content
Loading...

The ng-src AngularJS directive is used to bind an iframe source Url to a scope property. During performance testing, I noticed in IE (10 and 11), that the Url was being updated twice. This causes two GET requests, which slowed the page load down.

  • AngularJS

A GitHub issue logged in the AngularJS repository explained that I was not alone in this discovery and provided some workarounds including updating the AngularJS source (not a good idea!)

The code below is a directive (using TypeScript) for a custom iframe source which prevents the two requests. Note, I used AngularJS version 1.5.0 for testing.

export class IFrameSourceDirective implements ng.IDirective |LF|
public link: ng.IDirectiveLinkFn;
public restrict: any;

constructor() |LF| this.restrict = 'A'; this.link = ($scope: ng.IScope, $element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ngModelCtrl: ng.INgModelController): void => |LF|
attrs.$observe('iframeSrc', (value) => |LF|
if (value) |LF|
attrs.$set('src', value);
|RF|

|RF|);

|RF|

/**

* @returns an instance of IFrameSourceDirective, instantiated with Angular parameters.

*/

public static Factory() |LF|
var directive = () => |LF|
return new IFrameSourceDirective();
|RF|;

return directive;

|RF|

|RF|

app.directive("iframeSrc", IFrameSourceDirective.Factory());

Usage:

< iframe iframe-src="|LF||LF|myUrlPropery|RF||RF|">

This was a subtle issue, which could have had significant impact on usability. Hopefully this assists others working with AngularJS applications with the ng-src directive.