AngularJs ngNotify dismiss on click - angularjs

Question

I have been asked to add dismiss on click functionality to our notifications (which are served up by ngNotify). I thought this would be a simple task, but I cannot find this functionality by default.
At first I created a directive that targeted the class ngn-sticky. It was simply this:
angular.module('sapphire.directives').directive('ngnSticky', directive);
function directive(ngNotify) {
return {
restrict: 'C',
link: lnkFn
};
function lnkFn(scope, element, attrs, controller) {
element.on('click', function (e) {
ngNotify.dismiss();
e.preventDefault();
});
};
};
But this did not work. I added a button to the page with the notification and gave it the class ngn-sticky and that did work, but that was no the desired effect.
So, I though that maybe I can override the template like we do with angular-bootstrap, so I looked into the actual directive and found that it has no templateUrl to override.
Does anyone know how I can override the template? Or somehow add an onclick method to any ngNotify message?

Answer 1

Overriding the template is not a good solution, as you then implicitly depend on the internals of the external library!
Anyhow, in their source code you can see a template being put into the $templateCache.
function ngNotifyCache($templateCache) {
var html =
'<div class="ngn" ng-class="ngNotify.notifyClass">' +
'<span ng-if="ngNotify.notifyHtml" class="ngn-message" ng-bind-html="ngNotify.notifyMessage"></span>' + // Display HTML notifications.
'<span ng-if="!ngNotify.notifyHtml" class="ngn-message" ng-bind="ngNotify.notifyMessage"></span>' + // Display escaped notifications.
'<span ng-show="ngNotify.notifyButton" class="ngn-dismiss" ng-click="dismiss()">×</span>' +
'</div>';
$templateCache.put(TEMPLATE, html);
}
You should be able to override that by just putting in a new template with a the same key. Just the proper timing needs to be found out. The new template would need a ng-click attribute at the whole div I assume.
Source: https://docs.angularjs.org/api/ng/service/$templateCache, https://docs.angularjs.org/api/ng/type/$cacheFactory.Cache