iui-alert-placeholder
Directive that creates a placeholder area for alerts generated by iuiAlertService.
The id is used as the unique identifier for the iuiAlertService.
Always prefix the id with alert_ like alert_wizardStep
This prefix allows us to easily identify alerts in the codebase
Alerts with type: warning (red color) should never have a timeout.
<iui-alert-placeholder id="alert_exampleArea"></iui-alert-placeholder>
<div ng-controller="AlertController as alertMain">
<button
class="btn btn-default"
ng-click="alertMain.iuiAlertService.add('alert_exampleArea', { type: 'info', activeFor: 4000, canClose: true, message: 'Ah, it\'s the old... trick.'})">
Trigger Example Area Alert (4 second timeout)
</button>
<button
class="btn btn-default"
ng-click="alertMain.iuiAlertService.add('alert_appTop', { type: 'danger', message: 'Pardon me while I get my shoe phone.'})">
Trigger App Top Alert
</button>
<button
class="btn btn-default"
ng-click="alertMain.iuiAlertService.add('alert_appTop', { type: 'success', canClose: true, message: 'Pardon me while I get my shoe phone.', templateUrl: '/custom-template-url.html'})">
Trigger App Top Custom Template Alert Success
</button>
<button
class="btn btn-default"
ng-click="alertMain.iuiAlertService.clear('alert_exampleArea')">
Hide Example Area Alert
</button>
<button
class="btn btn-default"
ng-click="alertMain.iuiAlertService.clearAll()">
Hide ALL Alerts
</button>
</div>
app.run(['$templateCache', function($templateCache) {
$templateCache.put('/custom-template-url.html', '{{alertPlaceholder.alerts.alert.message}} <a href="">View the Shoe Phone</a> ');
}]);
app.controller('AlertController', ['iuiAlertService', function(iuiAlertService) {
this.iuiAlertService = iuiAlertService;
}]);