feat(toastr): be able to add custom html

Author: Foxandxss

src/toastr.js

@@ -4,8 +4,11 @@ angular.module('toastr', [])
     return {
       replace: true,
       template: '<div class="{{toastClass}} {{toastType}}" ng-click="close()">' +
-                    '<div ng-if="title" class="{{titleClass}}">{{title}}</div>' +
-                    '<div class="{{messageClass}}">{{message}}</div>' +
+                    '<div ng-if="title" class="{{titleClass}}" ng-click="fn()">{{title}}</div>' +
+                    '<div ng-switch on="messageType">' +
+                      '<div ng-switch-when="trusted" class="{{messageClass}}" ng-bind-html="message"></div>' +
+                      '<div ng-switch-default class="{{messageClass}}">{{message}}</div>' +
+                    '</div>' +
                 '</div>',
       link: function(scope, element, attrs) {
         var timeout;
@@ -45,6 +48,7 @@ angular.module('toastr', [])
   }])
 
   .constant('toastrConfig', {
+    allowHtml: false,
     containerId: 'toast-container',
     extendedTimeOut: 1000,
     iconClasses: {
@@ -60,7 +64,7 @@ angular.module('toastr', [])
     toastClass: 'toast'
   })
 
-  .factory('toastr', ['$animate', '$compile', '$document', '$rootScope', 'toastrConfig', '$q', function($animate, $compile, $document, $rootScope, toastrConfig, $q) {
+  .factory('toastr', ['$animate', '$compile', '$document', '$rootScope', '$sce', 'toastrConfig', '$q', function($animate, $compile, $document, $rootScope, $sce, toastrConfig, $q) {
     var container, index = 0, toasts = [];
     var containerDefer = $q.defer();
 
@@ -172,7 +176,13 @@ angular.module('toastr', [])
           toast.scope.title = map.title;
         }
 
-        toast.scope.message = map.message;
+        if (options.allowHtml) {
+          toast.scope.messageType = 'trusted';
+          toast.scope.message = $sce.trustAsHtml(map.message);
+        } else {
+          toast.scope.message = map.message;
+        }
+
         toast.scope.toastType = toast.iconClass;
         toast.scope.toastId = toast.toastId;
 

test/toastr_spec.js

@@ -14,6 +14,11 @@ describe('toastr', function() {
 
   beforeEach(function() {
     this.addMatchers({
+      toHaveA: function(tag) {
+        var el = this.actual.el.find(tag);
+        return el.length > 0;
+      },
+
       toHaveClass: function(cls) {
         this.message = function() {
           return 'Expected "' + this.actual + '"' + (this.isNot ? ' not ' : ' ') + 'to have class "' + cls + '".';
@@ -307,5 +312,12 @@ describe('toastr', function() {
       clickToast();
       expect($document).toHaveToastOpen(0);
     });
+
+    it('can show custom html on the toast', function() {
+      var toast = openToast('success', 'I like to have a <button>button</button>', null, {
+        allowHtml: true
+      });
+      expect(toast).toHaveA('button');
+    });
   });
 });