Use Iframely embeds with AngularJS

Known issue

AngularJS comes with jQuery lite (jqLite) and uses it if you don't add full jQuery to your page yourself.

Now, the issue with jqLite is that it does not execute the inline scripts that go with the HTML elements you add. Full jQuery evals the scripts and all embeds work alright.

It means you need a workaround for, say, Facebook, Twitter, Instagram, Imgur, GitHub Gists, Iframely cards and lazy-loaded iFrames, unless you load a full jQuery yourself.

iFrame-based embeds are fine in both cases.

The solution

a) Load the full jQuery; b) Rely on Iframely smart iFrames if you use AngularJS with jqLite.

Iframely offers a single external embed.js script that you need to deal with for all JavaScript-based embeds. It is served from our global CDN and is attached to all embeds that require scripting. In that case, make API calls with &iframe=true and &omit_script=true query-string parameters.

Example integration code

Data model

Simplest data model is:

item = {
    iframelyEmbedHtmlCode: String
}

iframelyEmbedHtmlCode - is the html field from JSON response you get from Iframely API or oEmbed API.

Controller

Depending on whether you use full jQuery or not, you may need to trigger our embed.js to load:

angular.module('myModule')
    // Directive is required only when there's no full jQuery on the page
    .directive('renderIframely', ['$timeout', function ($timeout) {
        return {
            link: function ($scope, element, attrs) {
                $timeout(function () {
                    // Run code after element is rendered                        
                    window.iframely && iframely.load();
                }, 0, false);
            }
      }    ;
    }])
    // Controller is required in both cases
    .controller('ItemCtrl', function($scope, $sce) {
        var item = $scope.item;
        $scope.iframelyHtml = $sce.trustAsHtml(item.iframelyEmbedHtmlCode);
    });

Template

If you use Iframely iFrames, add embed.js to your page first (see this gist to conditionally load embed.js only when required):

<script src="//cdn.iframe.ly/embed.js" async></script>

HTML template for your controller:

<div ng-controller="ItemCtrl">
    <div render-iframely ng-bind-html="iframelyHtml"></div>
</div>