CODEWITHSUNDEEP
javascriptangularjsmodal-dialogangular-strap
I want to delete my account
I want to delete my account

Reputation: 385

Angular Strap - Modal Html converting does not work

I created a modal by the documentation of the Angular Strap. But it is interesting for me that the Modal does not convert the HTML elements. I have tried with and without the built-in $sce.trustAsHtml() method, but the modal still renders out the html elements too as string. I use the modal only as an object.

This is in my Angular controller:

var message = "<span>A szelvény sikeresen elmentve!" + " URL: </span><a href='" + url + "'>" + url + "</a>"
$scope.modal = {
  "title": "Mentési eredmény",
  "content": $sce.trustAsHtml(message)
};

And here the button which activates the modal:

<button type="button" class="btn btn-sm btn-primary" ng-disabled="!savingResult.isSuccess" ng-click="saveSlip()" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">
 Mentés
</button>

Any body has an idea, how I should use the modal's content to convert the HTML elements and not render out as a string?

Because the following example will not create the link html element, because it is shown as a string...

Upvotes: 1

Views: 587

Answers (1)

Mateus Lopes
Mateus Lopes

Reputation: 86

i had the same problem and fixed with the following code:

'use strict';
var app = angular.module('angularApp', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);
angular.module('angularApp')

.config(function($modalProvider) {
  angular.extend($modalProvider.defaults, {
    html: true
  });
})

.controller('MyController', function($scope, $modal) {
  $scope.modal = {title: 'Title', content: 'Hello Modal<br />This is an html formatted message!'};
});

The solution is in adjusting the $modalProvider.defaults to html:true in the .config block. This requires the injection of the ngSanitize extension.

Hope that helps! ;)

Upvotes: 3

Related Questions