CODEWITHSUNDEEP
angularjsangular-strap
user1532669
user1532669

Reputation: 2378

Angular-strap: html element is rendering as text, why?

I've just got angular-strap installed and I'm trying out some of the features. I've got a modal functioning however the content doesn't render the <br /> element, it is rendering it as text. I don't see why and the docs show that it is working correctly. As far as I can tell I'm doing everything correctly.

Can anyone spot any issue with my code? I've stripped it as bare as possible. I did previously have ngAnimate and ngSanitize included.

var app = angular.module('app', ['mgcrea.ngStrap'])
.controller('myCtrl', function($scope) {
    $scope.modal = {
      "title": "Title",
      "content": "Hello Modal <br/> This is a multiline message!"
    };
});




<html ng-app="app">
    <head>

        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
        <script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
        <script src="//cdn.jsdelivr.net/angularjs/1.4.2/angular-animate.min.js" data-semver="1.4.2"></script>
        <script src="//cdn.jsdelivr.net/angularjs/1.4.2/angular-sanitize.min.js" data-semver="1.4.2"></script>
        <script src="app.js"></script>
    </head>
    <body>
        Angular Strap

        <div ng-controller="myCtrl">
        <!-- Button to trigger a default modal with a scope as an object {title:'', content:'', etc.} -->
        <button type="button" class="btn btn-lg btn-primary" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">Click to toggle modal
          <br>
          <small>(using an object)</small>
        </button>
        </div>
    </body>
</html>

Upvotes: 0

Views: 391

Answers (2)

user1532669
user1532669

Reputation: 2378

I've got it working now.

According to the docs: replace ng-bind with ng-bind-html, requires ngSanitize to be loaded

I set an option as per the plunkr on the docs and my code now looks like this:

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

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


.controller('myCtrl', function($scope) {
    $scope.modal = {
      "title": "Title",
      "content": "Hello Modal <br/> This is a multiline message!"
    };
});

Upvotes: 0

GeoffreyB
GeoffreyB

Reputation: 1839

Your problem may be related to the fact that Angular does not interpret HTML code when displaying any variable obtained programatically.

You should take a look at this directive: https://docs.angularjs.org/api/ng/directive/ngBindHtml, it may solve your problem!

Upvotes: 1

Related Questions