Warning: This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. For more information, see developer.blackbaud.com/skyux.

Template

The template directives allow you to place formatted text inside a tokenized string template. This avoids the need to build HTML manually on the server or in a custom directive where HTML injection bugs are common. The string template is specified with the bb-template attribute, and child elements with the bb-template-item attribute are the elements that contain the formatted text.

Template settings

  • bb-template — The tokenized string that represents the template. Tokens use the {n} notation where n is the ordinal of the item to replace the token.
    • bb-template-item — An attribute that specifies an element to be placed in the template, where the nth template item is placed at the {n} location in the template.

Demo

{{templateCtrl.number1}} {{templateCtrl.number2}}

Markup

<div ng-controller="TemplateTestController as templateCtrl">
  <span bb-template="templateCtrl.template">
    <strong bb-template-item style="font-size: 18px;">{{templateCtrl.number1}}</strong>
    <strong bb-template-item style="font-size: 16px;">{{templateCtrl.number2}}</strong>
  </span>
</div>

JavaScript

/*global angular */
(function () {
    'use strict';

    function TemplateTestController() {
        var self = this;
        self.template = '{0} is an important number. {1} is important, too, but not as important as {0}.';

        self.number1 = '39,210';
        self.number2 = '78';
    }

    angular.module('stache').controller('TemplateTestController', TemplateTestController);
}());