JanStevens/angular-growl-2

setting the position via property

Opened this issue · 2 comments

greglbd commented

It seems that in the factory there is a property of position on the message which takes the global position || position as set in the instance.

However doing this
growl.success("", {title: 'Thanks', position: 'top-left'});

doesn't seem to override the globalPosition, am i configuring it wrong?

thanks

Greg

royerboat commented

Looks like according to the github page http://janstevens.github.io/angular-growl-2/#config-global-message-position, changing the property can only be done globally, not per growl.

In the directive, the position is being set by calling growl.position(), which only returns the globally defined position, not the position of each individual growl.

HugCoder commented

The problem is that the position is set at the wrapper/container for the messages, so it's outside of the scope of where the messages are displayed as they are all in an ng-repeat inside the container.
The default template in string format looks like this:
'<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>'

One "solution" to be able to override the global position is to add a new attribute called position to the directive like this:
... scope: { reference: '@', inline: '=', limitMessages: '=', position: '@' }, ...
Then below
$scope.referenceId = $scope.reference || 0;
you can add
$scope.positionOverride = $scope.position || '';

and then you replace
classes[growl.position()] = true;
with
classes[$scope.positionOverride || growl.position()] = true;

To use this, you need to add in your HTML file something like this:
<div growl></div>
<div growl reference="1" position="bottom-right"></div>
<div growl reference="2" position="top-right"></div>

In Javascript you can now create messages in different position by referring to their referenceId in the config property with something like this:
growl.success('Test Global', { ttl: -1, referenceId: 0 });
growl.success('Test Bottom Right', { ttl: -1, referenceId: 1 });
growl.success('Test Top Right', { ttl: -1, referenceId: 2 });
Note that omitting the reference attribute in HTML means referenceID 0, and you could also leave that out of the config if you want.

I'm sure you could bind the position attribute to some $scope variable and change it on the fly when you are about to display a message, but that would move the whole container and make it impossible to display messages at different positions at the same time. The above is a "solution" that requires very little to probably solve some of your troubles as the library isn't maintained any more.

  • 👍1