Custom notification directive appears in the background, is there any way to prevent appearance of this directive?
My directive is simple, it appears if value in service returns true. This value will be changed in different controllers. So if I need notification to show I change this value to true and it appears.
#/directives.notification.js
'use strict';
/**
* @ngdoc directive
* @name App.notification
* @description
* # notification
* Directive in the App.
*/
angular.module('App')
.directive('headerNotification', ['HeaderNotification',
function (HeaderNotification) {
return {
restrict: 'E',
replace: false,
templateUrl: 'views/directives/notification.tpl.html',
link: function ($scope) {
$scope.isActive = function () {
return HeaderNotification.isNotificationActive();
};
}
};
}
]);
Directive template:
<div class="notification {{notification.color}} margin-top" ng-if="isActive()">
{{notification.text}}
<div class="close" ng-click="hideNotification()">
<i class="fa fa-times"></i>
</div>
</div>
Here is the service code
#/services/notification.js
'use strict';
/**
* @name App.Notification
* @description
* Service in the App.
*/
angular.module('App')
.service('HeaderNotification', function () {
var notification = {
isActive: false,
isNotificationPrepared: false,
color: '',
text: ''
};
function isNotificationActive() {
return notification.isActive;
}
return {
isNotificationActive: isNotificationActive
};
});
But it appears also if modal is opened and you can see the notification directive in the background.
One of my Idea is to check if Modal is shown and in this case don’t show notification directive. Example code:
#/some-view/some-template.html
<header-notification ng-if="ifModalNotOpened"></header-notification>
But I don’t know how to implement it. Any other suggestion are welcome. Thanks for help!