cgross / angular-notify

Minimalistic and extensible notification service for Angular.
http://cgross.github.io/angular-notify/demo/
MIT License
432 stars 99 forks source link

messageTemplate issue / proposal #37

Closed madmoizo closed 8 years ago

madmoizo commented 9 years ago

Hi,

if the class cg-notify-message-template is not a direct child of cg-notify-message element, notify can't find it. it can be a problem when you use a custom template. Moreover, use 2 differents elements (message and messageTemplate) is not very obvious and once again custom template are not clean.

I send my code as a suggestion for clean support for html (it's a coffescript with class style code)

Filter for trust HTML in $message

class TrustHTML

  constructor: ($sce) ->
    return (message) ->
      return $sce.trustAsHtml(message)

@app.filter 'trustHTML', ['$sce', TrustHTML]

Config notify with custom template (use of ng-bind-html with trustHTML filter)

class ConfigNotify

  constructor: (notify, $templateCache) ->

    # Global config
    notify.config
      duration: 4000
      startTop: 10
      verticalSpacing: 10
      maximumOpen: 3

    # Custom templates
    notifyDangerTpl = [
      '<div class="cg-notify-message cg-notify-message-center alert-danger" ng-style="{\'margin-left\': $centerMargin}">'
        '<table>'
          '<tr>'
            '<td class="cg-notify-icon"><i class="fa fa-warning"></i></td>'
            '<td class="cg-notify-content" ng-bind-html="$message | trustHTML"></td>'
            '<td class="cg-notify-button"><button type="button" class="cg-notify-custom-close" ng-click="$close()"><i class="fa fa-close"></i></button></td>'
          '</td>'
        '</table>'
      '</div>'
    ].join('')

   $templateCache.put('notify-danger.html', notifyDangerTpl)

@app.run ['notify', '$templateCache', ConfigNotify]

How to use ?

notify
   templateUrl: 'notify-danger.html'
   message: "A custom template with <b>trusted HTML</b>"

Result image