Minimal directive example

from https://groups.google.com/forum/?fromgroups#!topic/angular/Ovn-5jVK3So

by Jonathan Smith

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    
    <div ng-repeat="elem in testArray">
        <div example-directive1 firstprop='{{elem}}' secondProp='hello'>
        </div>   
    </div>

JavaScript

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

function MyCtrl($scope) {
    $scope.testArray = [1, 2, 3, 4];
}

app.directive('exampleDirective1', function() {
    return {
        restrict: 'AE',
        scope: {
            firstprop: '@'
        },
        template: '<p>{{firstProp}}</p>',                  
    }
});