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.

No console errors, everything is fine in the console. But the directive does not load on screen. — Andrew
– Andrew, Commented Dec 15, 2014 at 19:02
Well, if that's your full directive, you're missing a closing curly brace, parenthesis, and semicolon. It seems to work fine other than that see jsBin — Tom
– Tom, Commented Dec 15, 2014 at 19:09

Mihai Dinculescu · Accepted Answer · 2014-12-15 19:16:35Z

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>

edited Dec 15, 2014 at 19:16

answered Dec 15, 2014 at 19:11

Mihai Dinculescu

20k8 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related