JanStevens / angular-growl-2

growl-like notifications for angularJS projects
MIT License
285 stars 97 forks source link

linebreaks for non html input #77

Open ronny332 opened 9 years ago

ronny332 commented 9 years ago

Hi,

at first, I really like the slim interface which is available to start growl messages on the screen and I don't want to break it with overloaded external changes in my code.

My problem:

To catch and show for instance an unwanted/unknown error to the user, instead of keeping him in the dark or on a white page, I'm trying to output an error message which is translated by angular-growl-2 and angular-translate. This works like a charm with a single line.

Our i18n is html free and the (modified) error message of cause, too. Is angular-growl-2 able to show normal text input, with "\n" as line breaks, with a kind of text2html conversion at this moment?

It would be easy to modify the code and add this option by hand, but this will break the bower compatibility ;-).

flaviocysne commented 7 years ago

@ronny332 I started using this component last year and slowly (unfortunately) I'm trying to fill up some gaps in it. Are you still using this component? Did you solved this issue yourself? If so, could you share the code?

flaviocysne commented 7 years ago

My suggestion to use formatted text within a growl is to change the default template, as below. But this makes every growl message to be treated as plain text.

<script id="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-if="!message.disableCloseButton">&times;</button>
            <button type="button" class="close" aria-hidden="true" ng-if="showCountDown(message)">{{message.countdown}}</button>
            <h4 class="growl-title" ng-if="message.title" ng-bind="message.title"></h4>
            <div class="growl-message"><pre ng-bind-html="message.text"></pre></div>
        </div>
    </div>
</script>

Merging this solution, maybe, as an attribute to the message object describing the content as html true/false would be better. Other options are global configuration and/or tag attribute.