AngularJS - Simple Directive Use

by sc0ttyd

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-app="myApp">
    <div ui-foo>I should change iamfoo</div>
    <br>
    <div ui-bar>I should change to iambar</div>
    <my-frame data-iframe-src="http://www.google.com">test</my-frame>
</div>

CSS

.ui-state-highlight {
    background-color: #EEEEEE;
}

JavaScript

angular.module('ui.directives', []).directive('myFrame',

function () {
    return {
        restrict: 'E',
        require: '?ngModel',
        replace: true,
        transclude: true,
        template: '<iframe src="%url%" height="100%" width="100%" frameborder="0"></iframe>',
        compile: function (element, attrs, transclude) {
            console.log(element[0].outerHTML);
            element[0].outerHTML = element[0].outerHTML.replace('%url%',attrs.iframeSrc);
            console.log(element);
        }
    };
});
angular.module('myApp', ['ui.directives']);