This is a version, that simplely inject $sce into the service making the service works while the msg are HTML Tags.
alertService
.factory('alertService', ['$rootScope', '$timeout', '$sce', function ($rootScope, $timeout, $sce) { var exports;
// create an array of alerts available globally $rootScope.alerts = []; function _factory(alertOptions) { return $rootScope.alerts.push({ type: alertOptions.type, msg: $sce.trustAsHtml(alertOptions.message), close: function () { return exports.closeAlert(this); } }); } function _addAlert(alertOptions) { var index = this.factory(alertOptions) - 1, that = this; $timeout(function () { that.closeAlertByIndex(index) }, 5000); } function _closeAlert(alert) { return this.closeAlertByIndex($rootScope.alerts.indexOf(alert)); } function _closeAlertByIndex(index) { return $rootScope.alerts.splice(index, 1); } exports = { factory: _factory, addAlert: _addAlert, closeAlert: _closeAlert, closeAlertByIndex: _closeAlertByIndex }; return exports;
}]);
View <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="alert.close()"><span ng-bind-html="alert.msg"></span></alert>
awesome! It's exactly what I need to know!
This is a version, that simplely inject $sce into the service making the service works while the msg are HTML Tags.
alertService
.factory('alertService', ['$rootScope', '$timeout', '$sce', function ($rootScope, $timeout, $sce) {
var exports;
}]);
View
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="alert.close()"><span ng-bind-html="alert.msg"></span></alert>