Include link in angular-ui bootstrap alerts?

angular-ui, angular-ui-bootstrap, angularjs, angularjs-directive, escaping

Solution

Embedding HTML markup in AngularJS expression is usually not the best approach as this way you won't be able to evaluate AngularJS directives.

Anyway, coming back to your question - there are many ways of getting around your problem. If you are just after displaying links the simplest way to go would be 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>

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

Problem

How do I include links in an angular-ui bootstrap alert? Attempt: Plunker 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); }; } ```

Original source