7

How do I include links in an angular-ui bootstrap alert?

Attempt:

alert

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);
  };

}
Improve this question
1
  • 1
    Will need someone with rep to decode my ![alert][1] with backspaces Commented Jul 4, 2013 at 17:36

2 Answers 2

Reset to default
21

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

It doesn't seem to be working for me. Binding it to a span shows no text in the alert area. (and yes, I can see your plnkr working)
@user230347 Look carefully at the plunker. Did you include angular-sanitize.js (inside index.html)? Did you add dependency on the ngSanitize module (inside example.js)?
I have the same problem as mentioned above. I do have angular-sanitize and added dependency ngSanitize. I simply cannot get this working. :(
This worked for me with AngularJS 1.3.15. It should be marked as the answer.
I had a different problem, where I had used ng-bind-html on the alert directive itself, which obliterated the alert template. The extra span solved the problem. Thank you!
0

The answer above needed required a few more things in order to get working for me.

My alert looks like this: 

$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 me a filter to get around the $sce security. I named the filter unsafe: 

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

Then use the filter like this:

<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);
};
Improve this answer

1 Comment

Getting no such error, it just doesn't work, i.e. it works for such tags as <b> or <i>, but just as I try adding something with attribute style in it, it is cut away for some reasons, dunno where this happens.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.