0

I have a alert that is as below:

$scope.addAlert('danger', $sce.trustAsHtml('Invalid Alias Name: Certain 
limitations apply to alias naming. <a href="http://google.com/">Please refer 
to the documentation</a>'));

and I am binding this to html page as :

 <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" 
 close="closeAlert($index, alerts)" dismiss-on-timeout="2500">
            <span ng-bind-html="alert.msg"></span>
        </uib-alert>

As a result, Actual output:

    Error: Invalid Alias Name: Certain 
    limitations apply to alias naming. '<a href="http://google.com/">Please 
    refer to the documentation</a>'

Expected Output: Error: Invalid Alias Name: Certain limitations apply to alias naming. 'Please refer to the documentation'

Can anyone please help? I do not know what I am missing!

Thanks!

Pooja Thapa
  • 83
  • 1
  • 16

2 Answers2

1

Your example should work, check for any errors in the console. Here is a working example:

var app = angular.module('myApp', ['ngSanitize', 'ui.bootstrap']);
app.controller('myCtrl', function($scope, $sce) {
  $scope.alerts = [];
  $scope.addAlert = function(type, msg) {
    $scope.alerts.push({
      "type": type,
      "msg": msg
    });
  }
  $scope.addAlert('danger', $sce.trustAsHtml('Invalid Alias Name: Certain limitations apply to alias naming. <a href="http://google.com/">Please refer  to the documentation</a>'));
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.9/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div ng-app="myApp" ng-controller="myCtrl">

  <div uib-alert ng-repeat="alert in alerts" ng-class="'alert alert-{{alert.type}}'">
    <span ng-bind-html="alert.msg"></span>
  </div>

</div>

Note on:

  • Injection of ngSanitize module
  • Injection of $sce
  • Using <div uib-alert instead of <uib-alert (optional)
  • Changing type to ng-class with the right syntax for bootstrap CSS
Aleksey Solovey
  • 4,153
  • 3
  • 15
  • 34
0

Can you try something like the below code, also you can check this working plunker for your given sample scenario.

Template:

<body ng-controller="MainCtrl">
    <div ng-repeat="alert in alerts">
      <h4 ng-bind="alert.title"></h4>
      <span ng-bind-html="alert.msg | formatContent"></span>
    </div>
</body>

Controller:

app.controller('MainCtrl', function($scope, $sce) {
  $scope.alerts=[];
  $scope.addAlert=function(title, msg){
    $scope.alerts.push({title: title, msg: msg});
  }
  $scope.addAlert('danger', 'Invalid Alias Name: Certain limitations apply to alias naming. <a href="http://google.com/">Please referto the documentation</a>');
});

app.filter('formatContent', ['$sce', function($sce){
  return function(input){
    return $sce.trustAsHtml(input);
  }
}]);

I have Updated my answer to achieve it with filter as shown in the above code also check this plunker link which is working with the filter implementation.

Immanuel Kirubaharan
  • 1,094
  • 1
  • 11
  • 17