JanStevens/angular-growl-2

Allow use angular directives inside message

Opened this issue · 3 comments

growl.addWarnMessage('<a href ng-click='buttonClick()'>Call function</a>', {enableDirectives: true});

This would be handy in some cases.

For example I have a list of messages and growl-message is popped up when the list has some changes. Then the user is asked to refresh the list by clicking a refresh-link inside the growl-message. However this is not possible at this moment. Instead I'm using the onclose-callback which is quite handy. But I would like to prefer the clickable link in this case.

So +1 for this feature.

As simple as (in your run block) :

$templateCache.put('templates/growl/growl.html', '<div class="growl-container" ng-class="wrapperClasses()">' + '<div class="growl-item alert" ng-repeat="message in growlMessages.directives[referenceId].messages" ng-class="alertClasses(message)" ng-click="stopTimeoutClose(message)">' + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true" ng-click="growlMessages.deleteMessage(message)" ng-show="!message.disableCloseButton">&times;</button>' + '<button type="button" class="close" aria-hidden="true" ng-show="showCountDown(message)">{{message.countdown}}</button>' + '<h4 class="growl-title" ng-show="message.title" ng-bind="message.title"></h4>' + '<div class="growl-message" translate="{{message.text}}" translate-compile></div>' + '</div>' + '</div>');

I have replaced

ng-bind-html="message.text"

by

translate="{{message.text}}" translate-compile

I invite you to add in your config block :

growlProvider.globalTranslateMessages(false);

to avoid multiple translations