如何在 Angular Foundation Popover 内容中添加换行符?
How to add a line break in an Angular Foundation Popover content?
这看起来应该是一个简单的问题,但事实证明它比我最初想的要复杂得多。
我的 Angular Foundation Popover 指令中有几项我想用换行符分隔。
.div{ 'popover' => "Name: {{ user.name }} /br Age: {{ user.age }}", 'popover-trigger' => 'click' }
在html这一行的/br处加一个换行符的解决方法是什么?
这很棘手。如果您正在使用 angular-foundation(我真的建议使用它),您可以将官方弹出窗口模板修改为 HTML 不安全 - 而不是在弹出窗口中使用 HTML:
JS
"use strict";
// app definition - don't forget to include angular-foundation module
angular.module("app", ["mm.foundation"]);
// just o controller, nothing special
angular
.module("app")
.controller("MainController", MainController);
function MainController() {
var vm = this;
vm.name = "John Doe"
vm.email = "john.doe@example.com"
}
// unsafe filter - this is used in the template below
angular
.module("app")
.filter("unsafe", unsafe)
function unsafe($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
};
// oficial popover template modification
angular
.module("template/popover/popover.html", [])
.run(["$templateCache", function($templateCache) {
$templateCache.put("template/popover/popover.html",
"<div class=\"joyride-tip-guide\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
" <span class=\"joyride-nub\" ng-class=\"{\n" +
" bottom: placement === 'top',\n" +
" left: placement === 'right',\n" +
" right: placement === 'left',\n" +
" top: placement === 'bottom'\n" +
" }\"></span>\n" +
" <div class=\"joyride-content-wrapper\">\n" +
" <h4 ng-bind-html=\"title | unsafe\" ng-show=\"title\"></h4>\n" +
" <p ng-bind-html=\"content | unsafe\"></p>\n" +
" </div>\n" +
"</div>\n" +
"");
}]);
HTML
<main ng-app="app" ng-controller="MainController as vm">
<div class="row">
<div class="small-12 column">
<div popover="{{vm.name + '<br />' + vm.email}}" popover-trigger="mouseenter">
<h1>Hover me!</h1>
</div>
</div>
</div>
</main>
你在这里工作CodePen example。
您也可以制定自己的指令以同时拥有 HTML 安全弹出窗口和 HTML 不安全弹出窗口 - 或者您可以使用支持 HTML 的 tooltip insetead默认情况下不安全(指令 tooltip-html-unsafe
)。
这看起来应该是一个简单的问题,但事实证明它比我最初想的要复杂得多。
我的 Angular Foundation Popover 指令中有几项我想用换行符分隔。
.div{ 'popover' => "Name: {{ user.name }} /br Age: {{ user.age }}", 'popover-trigger' => 'click' }
在html这一行的/br处加一个换行符的解决方法是什么?
这很棘手。如果您正在使用 angular-foundation(我真的建议使用它),您可以将官方弹出窗口模板修改为 HTML 不安全 - 而不是在弹出窗口中使用 HTML:
JS
"use strict";
// app definition - don't forget to include angular-foundation module
angular.module("app", ["mm.foundation"]);
// just o controller, nothing special
angular
.module("app")
.controller("MainController", MainController);
function MainController() {
var vm = this;
vm.name = "John Doe"
vm.email = "john.doe@example.com"
}
// unsafe filter - this is used in the template below
angular
.module("app")
.filter("unsafe", unsafe)
function unsafe($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
};
// oficial popover template modification
angular
.module("template/popover/popover.html", [])
.run(["$templateCache", function($templateCache) {
$templateCache.put("template/popover/popover.html",
"<div class=\"joyride-tip-guide\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
" <span class=\"joyride-nub\" ng-class=\"{\n" +
" bottom: placement === 'top',\n" +
" left: placement === 'right',\n" +
" right: placement === 'left',\n" +
" top: placement === 'bottom'\n" +
" }\"></span>\n" +
" <div class=\"joyride-content-wrapper\">\n" +
" <h4 ng-bind-html=\"title | unsafe\" ng-show=\"title\"></h4>\n" +
" <p ng-bind-html=\"content | unsafe\"></p>\n" +
" </div>\n" +
"</div>\n" +
"");
}]);
HTML
<main ng-app="app" ng-controller="MainController as vm">
<div class="row">
<div class="small-12 column">
<div popover="{{vm.name + '<br />' + vm.email}}" popover-trigger="mouseenter">
<h1>Hover me!</h1>
</div>
</div>
</div>
</main>
你在这里工作CodePen example。
您也可以制定自己的指令以同时拥有 HTML 安全弹出窗口和 HTML 不安全弹出窗口 - 或者您可以使用支持 HTML 的 tooltip insetead默认情况下不安全(指令 tooltip-html-unsafe
)。