Error

The error directive provides a template that allows other components to display error messages when errors occur. The parent bb-error directive can contain multiple directives, and each one is optional.

Error settings

  • bb-error — Wraps the error message in a SKY UX-themed container.
    • bb-error-image — Specifies an image to display in the error message.
    • bb-error-title — Specifies a title to display in the error message.
    • bb-error-description — Specifies a description to provide additional details in the error message.
    • bb-error-action — Specifies an action to include in the error message. For example, you can include a button to reload the page or to refresh data.
    • bb-error-type — Attribute to specify a set of pre-defined bb-error-image, bb-error-title, and bb-error-description directives. The user can provide bb-error-image, bb-error-title, and bb-error-description directives to override any of the pre-defined types. It can have the following values, and each of these values can also be applied as an error-type for bb-error-image, bb-error-title, and bb-error-description individually:
      • broken — An error indicating that some functionality on the page is broken.
      • construction — An error indicating that some functionality on the page is under construction.
      • notFound — An error indicating that a page was not found.

In addition to the directive, the error component includes a service that can display simple error messages in a modal window.

Error modal settings

  • bbErrorModal — The service to inject in order to display an error message in a modal window.
    • show(options) — The function to call to display the error modal. The options parameter supports the following properties:
      • errorTitle — Specifies a title to display in the error message.
      • errorDescription — Specifies a description to provide additional details in the error message.

Demo

Pre-defined error types


Custom error content

{{errorCtrl.customErrorTitle}} {{errorCtrl.customErrorDescription}}

Markup

<div ng-controller="ErrorTestController as errorCtrl" ng-cloak>
  <h3>Pre-defined error types</h3>
  <select ng-model="errorCtrl.errorType">
    <option value="broken">Broken</option>
    <option value="notFound">Not found</option>
    <option value="construction">Construction</option>
  </select>
  <bb-error bb-error-type="{{errorCtrl.errorType}}">
    <bb-error-action>
      <button type="button" class="btn-primary btn" ng-click="errorCtrl.action()">{{errorCtrl.actionName}}</button>
    </bb-error-action>
  </bb-error>

  <hr />
  <h3>Custom error content</h3>
  <bb-error>
    <bb-error-image>
      <img role="presentation" src='data:image/png;base64,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'/>
    </bb-error-image>
    <bb-error-title>
      {{errorCtrl.customErrorTitle}}
    </bb-error-title>
    <bb-error-description>
      {{errorCtrl.customErrorDescription}}
    </bb-error-description>
    <bb-error-action>
      <button type="button" class="btn-primary btn" ng-click="errorCtrl.action()">{{errorCtrl.customActionName}}</button>
    </bb-error-action>
  </bb-error>

  <hr />
  <button type="button" class="btn btn-primary" ng-click="errorCtrl.openModal()">Open modal</button>
</div>

JavaScript

/*global angular, alert */
(function () {
    'use strict';
    function ErrorTestController(bbErrorModal) {
        var vm = this;

        vm.errorTitle = 'A title thing.';
        vm.errorDescription = 'Try to refresh this page, or come back later.';

        vm.customErrorTitle = 'Custom error title';
        vm.customErrorDescription = 'Custom error description';

        vm.action = function () {
            alert('action clicked!');
        };

        vm.actionName = 'Refresh';
        vm.customActionName = 'Custom action';

        vm.openModal = function () {
            bbErrorModal.open({
                errorTitle: vm.errorTitle,
                errorDescription: vm.errorDescription
            });
        };

        vm.errorType = 'broken';
    }

    ErrorTestController.$inject = ['bbErrorModal'];

    angular.module('stache')
        .controller('ErrorTestController', ErrorTestController);

}());