AngularJS - iFrame

Simple example for StackOverflow (http://stackoverflow.com/questions/19753473/iframe-name-attribute-with-angular-expression)

by dshilkret

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
<div ng-app="app" ng-controller="MyCtrl"> <span ng-repeat="f in frames" ng-click="setFrame(f)">
        {{ f.name }}
    </span>

    <section ng-if="frame">
        jQuery Style
        <div ng-app="app">
            <my-iframe frame="{{ frame }}"></my-iframe>
        </div>
        
        SCE Angular Style
        <div ng-app="app" ng-controller="MyCtrl">
            <qes-iframe frame="{{frame}}"></qes-iframe>
        </div>
    </section>
</div>

CSS

iframe {
    width: 100%;
    height: 25%;
    border: 0;
}
span {
    display: block;
    cursor: pointer;
}

JavaScript

var app = angular.module('app', []);
app.controller('MyCtrl', function ($scope, $timeout) {
    $scope.setFrame = function (frame) {
        $scope.frame = frame;
    }


    $scope.frames = [{
        'name': 'jqueryLink',
            'src': 'https://sdev2.sharepoint.com/:x:/r/_layouts/15/WopiFrame.aspx?sourcedoc={c456dd58-040e-4281-8daf-8842e0f97848}&action=embedview'
    }, {
        'name': 'angularLink',
            'src': 'https://sdev2.sharepoint.com/:x:/r/_layouts/15/WopiFrame.aspx?sourcedoc={c456dd58-040e-4281-8daf-8842e0f97848}&action=embedview'
    }];
});

app.directive('myIframe', function () {
    return {
        restrict: 'E',
        template: '<iframe></iframe>',
        link: function (scope, element, attrs) {
            console.log(attrs);
            attrs.$observe('frame', function (val) {
                console.log(val);
                element.find('iframe').attr('src', scope.frame.src);
            });
        }
    };
});

$scope.urlSCE = function ($sce) {
    return {
        restrict: 'E',
        template: '<div><iframe ng-src="{{ frame.trustSrc }}" frameborder="0"></iframe></div>',
        link: function (scope, element, attrs) {
            attrs.$observe('frame', function (val) {
                scope.frame.trustSrc = $sce.trustAsResourceUrl(scope.frame.src);
            });
        }
    };
}