AngularJS - Comment Directive

by sjmcpherson

HTML

<div ng-app="FooApp">
    <div ng-controller="BarCtrl">
         <h3>Element:</h3>

        <div ng-repeat="item in items">
            <in-qux></in-qux>
        </div>
        <hr />
         <h3>Attribute:</h3>

        <div ng-repeat="item in items">
            <div in-qux></div>
        </div>
        <hr />
         <h3>Comment:</h3>

        <div ng-repeat="item in items">
            <!-- directive: in-qux -->
        </div>
    </div>
</div>

JavaScript

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


app.controller('BarCtrl', function ($scope) {
    $scope.items = [{
        type: 'foo',
        value: Math.random()
    }, {
        type: 'bar',
        value: Math.random().toString(16)
    }];
});

app.directive('inQux', function ($compile) {
    var inQux;

    inQux = {
        template: '<div>I\'m {{item.type}}. {{item.value}}</div>',
        restrict: 'AME',
        replace: true
    };

    return inQux;
});