在 mdDialog 中显示原始 XML
Displaying raw XML in mdDialog
我正在尝试使用 Angular Material 在 $mdDialog 中显示一些 XML。如果我使用标准警报显示它,我会如我所料看到 XML,但 $mdDialog 或 Angular 会从中删除所有标签。
这是代码。就 XML 而言,注释掉的两行都没有影响。
function displayFile(data, fieldName) {
var content = eval("data." + fieldName);
alert(content);
if (content) {
//content = $sanitize(content);
//content = $sanitize("<code>" + content + "</code>");
} else {
content = fieldName + " does not contain any content.";
};
var myAlert = $mdDialog.alert({
title: data.FILE_NAME,
content: content,
ok: 'Close'
});
$mdDialog
.show(myAlert)
.finally(function () {
myAlert = undefined;
});
};
有什么想法吗?
在google组中提出自己的解决方案post(以便大家参考):
angular.module('myApp', ['ngMaterial'])
.controller('mdDialogController', mdDialogController)
mdDialogController.$inject = ["$mdDialog"]
function mdDialogController($mdDialog) {
vm = this;
vm.show = function() {
var xml = "\
<header> \
<detail>\
<item>item1</item>\
<item>item2</item>\
</detail> \
</header>"
var myAlert = $mdDialog.alert({
title: "Show me the XML",
content: xml,
ok: 'Close'
});
$mdDialog
.show(myAlert)
.finally(function() {
myAlert = undefined;
});
};
};
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.min.css" />
<title>mdDialog test</title>
</head>
<body>
<div ng-controller="mdDialogController as dialog">
<md-button ng-click="dialog.show()">
Show Dialog
</md-buton>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.4/angular-material.min.js"></script>
</body>
我正在尝试使用 Angular Material 在 $mdDialog 中显示一些 XML。如果我使用标准警报显示它,我会如我所料看到 XML,但 $mdDialog 或 Angular 会从中删除所有标签。
这是代码。就 XML 而言,注释掉的两行都没有影响。
function displayFile(data, fieldName) {
var content = eval("data." + fieldName);
alert(content);
if (content) {
//content = $sanitize(content);
//content = $sanitize("<code>" + content + "</code>");
} else {
content = fieldName + " does not contain any content.";
};
var myAlert = $mdDialog.alert({
title: data.FILE_NAME,
content: content,
ok: 'Close'
});
$mdDialog
.show(myAlert)
.finally(function () {
myAlert = undefined;
});
};
有什么想法吗?
在google组中提出自己的解决方案post(以便大家参考):
angular.module('myApp', ['ngMaterial'])
.controller('mdDialogController', mdDialogController)
mdDialogController.$inject = ["$mdDialog"]
function mdDialogController($mdDialog) {
vm = this;
vm.show = function() {
var xml = "\
<header> \
<detail>\
<item>item1</item>\
<item>item2</item>\
</detail> \
</header>"
var myAlert = $mdDialog.alert({
title: "Show me the XML",
content: xml,
ok: 'Close'
});
$mdDialog
.show(myAlert)
.finally(function() {
myAlert = undefined;
});
};
};
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.min.css" />
<title>mdDialog test</title>
</head>
<body>
<div ng-controller="mdDialogController as dialog">
<md-button ng-click="dialog.show()">
Show Dialog
</md-buton>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.4/angular-material.min.js"></script>
</body>