Turn an HTML/CSS element into a re-usable AngularJS directive?

Question

I have an existing HTML based web UI for an administration panel.

I am trying to take all of the HTML components, and turn them into re-usable AngularJS directives so I can embed them in a page with minimal effort.

Here is one I'm stuck on:

<section class="dash-tile">
    <div class="tile-title" ng-controller="testCtrl">{{test}}</div>
    <div class="tile-stats"><b>8068</b>
    </div>
    <div class="progress progress-xs mt5 mb10">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
        </div>
    </div>
    <div class="tile-footer">
        Based on new sales
    </div>
</section> 

This snippet, used inside of my .html GUI will create a small box shaped title with some data inside.

Could someone give me an example of how to turn this into a reusable component?

So far I'm here:

admin.directive('whiteBox', function () {
  return {
    restrict: 'EA', //restrict the directive to ONLY an attribute or element
        replace: true,
    transclude: true,
    template: '<section class="dash-tile">' +
                                    '<div class="tile-title" ng-controller="testCtrl">' + '{{test}}' + '</div>'
                                    + '<div class="tile-stats">' + '<b>' + '8068' + '</b>'
                                    + '</div>'
                                    + '<div class="progress progress-xs mt5 mb10">'
                                        + '<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'
                                    + '</div>'
                                    + '</div>'
                                    + '<div class="tile-footer">'
                                    +   'Based on new sales'
                                    + '</div>'
                                + '</section> ',
        link: function (scope, element, attrs) {
                // add events
        }
    };

But this breaks the application for some reason.

Answer 1

AngularJS uses the following convention

If you name your directive whiteBox , in HTML you use it white-box .

AngularJS declaration

app.directive('myDirective', function () {

HTML usage

<div my-directive></div>