Question

我正在尝试使用AngularStrap进行模态。这是我的代码：

的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!"
    };
});

当我在浏览器上测试时，会出现模态。但内容<br />正在模式上显示。它没有变成新的界限。此外，模态背景不会变成灰色。

enter image description here

我该如何解决？

Answer 1

首先，你应该包含angular sanitize让角度处理html：

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

然后，根据AngularStrap Modal docs，您应该将html="true"属性添加到模态指令属性中：

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

那就是它。

这是一个有效的JSFiddle，其中包含针对模态背景的脏CSS修复。

用于高度为0的背景的脏（恕我直言）CSS修复（您可能在其中具有相对定位内容的网站上不需要它，但是我将背景的高度拉伸到整个高度）：

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

P.S。如果在HTML中包含用户输入的文本，请务必小心。阅读XSS。仔细阅读angular $sanitize docs。

AngularStrap模态

1 个答案: