Include link in angular -ui bootstrap posts?

Question

How to include links in angular -ui bootstrap notification?

Attempt:

Plunger example

HTML

<div ng-controller="AlertDemoCtrl"> <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert> <button class='btn' ng-click="addAlert()">Add Alert</button> </div> 

Script

 function AlertDemoCtrl($scope) { $scope.alerts = [ { type: 'error', msg: 'Oh snap! Change a few things up and try submitting again.' }, { type: 'success', msg: '<a href="">Well done!</a> You successfully read this important alert message.' } ]; $scope.addAlert = function() { $scope.alerts.push({msg: "Another alert!"}); }; $scope.closeAlert = function(index) { $scope.alerts.splice(index, 1); }; } 

Answer 1

Embedding HTML markup in an AngularJS expression is usually not the best approach, as you will not be able to evaluate AngularJS directives.

In any case, returning to your question, there are many ways to get around your problem. If you see links immediately, the easiest way is to use the ng-bind-html directive ( http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml ):

  <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"> <span ng-bind-html="alert.msg"></span> </alert> 

Dashboard: http://plnkr.co/edit/Ftab0xtcelXcHSZbFRxs?p=preview

Answer 2

Answering this question took a few more things to work for me.

My warning is as follows:

 $scope.alerter.add({ type: "danger", msg: "<strong>ERROR:</strong> Unable to load credit care plan. Please contact your administrator." }); 

After doing the above, I started getting the following error:

 Error: [$sce:unsafe] 

So, I went ahead and made a filter to bypass the security of $ sce. I called the filter unsafe:

 .filter('unsafe', function($sce) { return function(value) { if (!value) { return ''; } return $sce.trustAsHtml(value); }; }) 

Then use the filter as follows:

 <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)"> <span ng-bind-html="alert.msg | unsafe"></span> </alert> 

My closeAlert function looked like this:

 $scope.closeAlert = function(index) { $scope.alerts.splice(index, 1); };