Add Iframely to Angular

Known issue

Angular comes with jQuery lite (jqLite) by default, unless you add full jQuery to your page yourself. The issue with jqLite is that it does not execute (eval) the inline scripts that go with the HTML elements you add. Full jQuery runs the scripts and all embeds work alright.

In Cardova enrironment, you may need a workaround for, say, Facebook, Twitter, Instagram, Imgur, GitHub Gists, Iframely cards and lazy-loaded iFrames.

Any iFrame-based embeds are fine in both cases.

The solution

  • Load the full jQuery; or
  • Rely on Iframely 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=1 and &omit_script=1 query-string parameters.

Example integration code

Data model

Minimal data model is this:

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:

<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>

If you don't use Iframely on every page, please load embed.js this gista> to conditionally conditionally and only when required. See this gist.

Previous article: React
Next article: CKEditor