Search code examples
angularjstwitter-bootstrapangular-strap

AngularStrap Modal

I am trying to do the modal using AngularStrap. Here is my code:

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Angular-Strap</title>
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="bower_components/angular-motion/dist/angular-motion.min.css">
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.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 type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MainController">
    <button type="button" class="btn btn-lg btn-danger" data-animation="am-fade-and-slide-top" bs-modal="modal">Toggle Modal</button>
</body>
</html>

app.js

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

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

When I test on browser, the modal does appear. But the content <br /> is being displayed on the modal. It does not turn into new line. Also, the modal background does not turn into grey color.

enter image description here

How can I fix it?

Solution

  • First of all you should include angular sanitize to let angular to deal with html:

    <script src="bower_components/angular/angular-sanitize.js"></script>

    Then, according to AngularStrap Modal docs you should add html="true" attribute to your modal directive attributes:

    <button type="button" class="btn btn-lg btn-danger" data-animation="am-fade-and-slide-top" bs-modal="modal" html="true">Toggle Modal</button>

    That's it.

    Here is a working JSFiddle with dirty CSS fix for a modal backdrop.

    The dirty (IMHO) CSS fix for backdrop having height 0 (you probably won't need it on a site with relatively positioned content in it, however i stretch the height of backdrop to the whole height):

    .modal-backdrop {
    top: 0;
    bottom: 0;
}

    P.S. Always be careful if you include user inputted text in your HTML. Read about XSS. Read angular $sanitize docs carefully.