AngularStrap Modal

Я пытаюсь сделать modal используя AngularStrap. Вот мой код:AngularStrap Modal

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

Как я могу это исправить?

источник

2014-12-26 user1995781

Где вы записываете контент? вы связываете его с помощью «ng-bind-html», пожалуйста, посмотрите на этот URL https://docs.angularjs.org/api/ng/service/$sce, как его использовать. –

Прежде всего, вы должны включать в себя 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 для модального фона.

Грязное (ИМХО) CSS исправление фона имеющего высоту 0 (вы, вероятно, не будете нуждаться в его на месте с относительно позиционированного содержания в нем, однако я растянуть высоту фона на всю высоту):

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

PS Всегда будьте осторожны, если вы включите введенный пользователем текст в свой HTML. Читайте о XSS. Внимательно прочитайте angular $sanitize docs.

источник

2014-12-26 10:33:57

Большое спасибо за ваш ответ, теперь контент отображается в 2 строках. Но модальный фон все еще не в сером цвете. Как я могу сделать его серым? – user1995781

Когда я использовал элемент Inspect Firefox, я увидел 0 для вычисленной высоты модели. http://stackoverflow.com/questions/26926798/angular-ui-modal-directive-backdrop-missing здесь вы можете увидеть ту же проблему (похоже, она такая же). Я обновил скрипку с грязным исправлением CSS для этого: http://jsfiddle.net/elennaro/j4xL7hmq/1/. –

следует также отметить в их документации! – Asqan

AngularStrap Modal

ответ

Смежные вопросы