add ng-click action on a growl notification

[LeleDev]

How to programmatically add a "ng-click" action on certain growl notifications?

[flaviocysne]

Create another template that uses ng-click. angular-growl-2 already uses ng-click in the close button.

angular-growl-2 default template is declared on-the-fly

  if ($templateCache.get('templates/growl/growl.html') === undefined) {
    $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" ng-bind-html="message.text"></div>' +
      '</div>' +
      '</div>'
    );
  }

You can create another template that don't use data-dismiss="alert" and/or call another method like ng-click="myAlertCloseMethod()".

Example:

<script type="text/ng-template" 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" aria-hidden="true" ng-click="myAlertCloseMethod(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" ng-bind-html="message.text"></div>
        </div>
    </div>
</script>

Note that angular-growl-2 advices about creating another template saying

Important: Omitting one of the ng-show or ng-click directives in the template can brake angular-growl.

So, remember to call growlMessages.deleteMessage(message) inside the code of myAlertCloseMethod(message), if you are changing ng-click method in close button.

[blitzmann]

Making a new template is certainly a round about way of doing things. There are times when, depending on the controller I'm calling the growl in, I want to add an ng-click so that the user can click in the growl to have something happen.

It would be preferable if it was possible to pass in the scope that we want to $compile the message to. Or, for example pass in functions to the config that bind to the message, ex:

$scope.fireInfo = function(){
    growl.info('<span ng-click="myClickFunction()">Click me!</span>', {userFunctions: {myClickFunction: $scope.myClickFunction}});
}

$scope.myClickFunction = function(){
    console.log('Clicked through growl');
}

I am not experienced enough to know how exactly to do this, but I feel it should be possible. All in all, it would be wonderful if we can call customer functionality through the growl notification without 1) modifying the directive itself, and 2) modifying the template (which all growls use)

[Tomasrg]

How can I add a working link on message to another location I can´t make works

[Chatles]

I want this too.