HG2D - Ways to use a directive

Learn what are the ways to use Directives in AngularJS

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div angular></div>
<div class="angular"></div>
<angular></angular>
<!-- directive: angular -->

CSS

img {
    float: left;
    margin-right: 20px;
}

JavaScript

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

App.directive('angular', function() {
    return {
        restrict: 'ECMA',
        link: function(scope, element, attrs) {
            var img = document.createElement('img');
            img.src = 'http://goo.gl/ceZGf';
            
            
            // directives as comment
            if (element[0].nodeType === 8) {
                element.replaceWith(img);
            } else {
                element[0].appendChild(img);            
            }
        }
    };
});