如何在 Angular Foundation Popover 内容中添加换行符？答案

【问题标题】：How to add a line break in an Angular Foundation Popover content?如何在 Angular Foundation Popover 内容中添加换行符？
【发布时间】：2015-09-09 19:27:58
【问题描述】：

这似乎应该是一个简单的问题，但事实证明它比我最初认为的要复杂得多。

我的 Angular Foundation Popover 指令中有几项我想用换行符分隔。

.div{ 'popover' => "Name: {{ user.name }} /br Age: {{ user.age }}", 'popover-trigger' => 'click' }

在html的这一行/br所在的位置添加换行符的解决方法是什么？

【问题讨论】：

标签： angularjs zurb-foundation haml

【解决方案1】：

这很棘手。如果您使用angular-foundation（我真的建议使用它），您可以将官方弹出框模板修改为 HTML 不安全 - 而不是您可以在弹出框中使用 HTML：

"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 时都必须一遍又一遍地执行此操作。我想知道是否有更简单、更永久的解决方案？如果我在几天内没有听到另一个消息，我会用你的作为答案。谢谢！
@JDC 您不必修改库本身，因此无需在每次更新时修改 angular-foundation。您可以简单地将修改放入您自己的文件中 - 它会覆盖原始模板:-)
谢谢。我最终使用了你的代码。具体来说，对于未来可能需要解决方案的人，我使用了 Akarienta 的 JS 文件中“不安全过滤器”和“官方弹出框模板修改”下的代码块。您只需要将它包含在您的任何角度文件中。请务必将 .module("app") "app" 更改为您用于 ng-app 的任何内容。此外，您要确保在 mm.foundation 加载后您的文件位于资产管道中，以便此修改代码可以覆盖原始代码。