Angular JS Directives

All the types, in all sorts of ways. *** NOT NG BEST PRACTICES ***

by Steven Senkus

HTML

<div ng-app="awesomeApp">
    <!-- DIRECTIVES -->
    
    <!-- comment-style directives -->
    <!-- directive: ninja ohyeah 忍者 忍び -->
    <!-- directive: person id=1,name=dude,age=25,job=software developer-->
    
    <!-- element-style -->
    <ca$# name="Steve" result="Holy shit, <ca$#> is a new element in HTML8"></ca$#>
    
    <!-- attribute-style -->
     <h1 m0ney$></h1>
     <!-- class-style -->
     <ul class="awesome"></ul>

</div>

CSS

h1, h2, h3 {
    font-size: 16px;
    margin: 2px;
}
h1 {
    font-size: 20px;
}

JavaScript

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

// just a quick template with an awesome tag name
App.directive('ca$#', function () {
    return {
        restrict: 'E',
        link: function (s, e, a) {
            console.log(a);
            s.name = a.name;
            s.result = a.result;
        },
        template: '<h1>{{name}}</h1><h2>{{name}}</h2><h3>{{name}}</h3><h6>{{result}}</h6>'

    };
});

// attribute directive for fun and profit
App.directive('m0ney$', function () {
    return {
        restrict: 'A',
        link: function (s, e, a) {
            s.named = '$$$'
        },
        // Angular lesson learned: 
        //    don't use the same scope variable name as another directive!
        template: '<h1>{{named}}</h1><h2>{{named}}</h2>'
    };
});

//
App.directive('awesome', function () {
    return {
        restrict: 'C',
        link: function (s, e, a) {
            s.squiggles = '~~~';
            s.fundamentals = (function a(j) {
                var arr = []
                for (var i = 0; i < j; i++) {
                    arr.push(i)
                }
                return arr;
            }(s.japanese.length));
        },
        // I can see myself abusing the comment directive
        // just dumping whatever is in the directive scope
        template: '<li style="display:block; position: relative; font-size: 14px;" ng-repeat="fun in fundamentals"><td>{{$index}} {{$first}} {{middle}} {{$last}} <h1 style="top: -5px; left: -20px; position:absolute; font-size: 20px; color: #f00">{{japanese[$index]}}</h1> {{person.job}}</li>'
    };
});

// this one just adds a variable to the scope
// Seemed like a good idea at the time!
App.directive('ninja', function () {
    return {
        restrict: 'M',
        link: function (s, e, a) {
            console.log(a)
            s.japanese = a.ninja;
            console.log('scope', s)
        }
    };
});

App.directive('person', function () {
    return {
        restrict: 'M',
        link:...