Angular Iframe directive

by paulftw

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
<div ng-app='frames' ng-controller='Frames'>
    <button ng-click="add_frames()">add 300 iframes</button>
    <button ng-click="clear_frames()">clear</button>

    <div ng-repeat="frame in iframes">
        <ftw-iframe huy="tran">{{frame.name}} {{frame.dir_name}}</ftw-iframe>
    </div>
</div>

JavaScript

var mod = angular.module('frames', []);

mod.controller('Frames', function($scope) {
    $scope.iframes = [{name: 'a'}, {name: 'b'}, {name: 'c'}];

    $scope.add_frames = function() {
        for (var i = 0; i < 300; i++) {
            $scope.iframes.push({name: 'iframe #' + i});
        }
        $scope.iframes[0].name = 'total = ' + $scope.iframes.length;
    };

    $scope.clear_frames = function() {
        $scope.iframes = [];
    };
});


mod.directive('ftwIframe', ['$compile',function($compile) {
    return {
        restrict: 'E',
        transclude: true,
        scope: true,
        template: '<iframe class="ftw-iframe"></iframe>',
        compile: function(element, attributes) {
            return {
                pre: function(scope, element, attributes, controller, transcludeFn) {
                    element = element.find('iframe').contents().find('body');
                    var frame_scope = null;
                    //console.log('call transclude', transcludeFn);
                    var frame_body = transcludeFn(function(element, scope) {
                        frame_scope = scope;
                    });
                    //console.log(frame_body, frame_scope.$id, !!frame_scope.$destroy);
                    scope.$on('$destroy', function() {
                        //frame_body.detach();
                        frame_scope.$destroy();
                    });
                    element.append(frame_body);
                },
                post: function(scope, element, attributes, controller, transcludeFn) {}
            };
        },
        controller: function($scope) {}
    };
}]);