AngularJS Element Directive

by martijngr

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.js"></script>
<div ng:app="MyApp">
    
    
    <script type="text/ng-template" id="good.html">
        <span><div ng-repeat="number in numbers" class="number green">good</div></span>
    </script>
    
    <div ng-controller="appCtrl">
        <template-url-good></template-url-good>
    </div>
</div>

CSS

.number {
    width:50px;
    height:20px;
    margin:5px;
    float:left;
    color:white;
}
.red{
    background:red;
}
.blue{
    background:blue;
}
.green{
    background:green;
}

JavaScript

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

myMod.directive('templateUrlBad', function () {
    return {
        restrict:'E',
        replace: true,
        templateUrl: 'bad.html'
    };
});
myMod.directive('templateUrlGood', function () {
    return {
        restrict:'E',
        replace: true,
        templateUrl: 'good.html'
    };
})

myMod.directive('inlineTemplate', function () {
    return {
        restrict:'E',
        replace: true,
        template: '<div ng-repeat="number in numbers" class="number blue">inline</div>',
        link: function () {
            console.log('link');
        }
    };
});

function appCtrl($scope) {
    $scope.numbers = [1, 2, 3];
}