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

Question

这看起来应该是一个简单的问题，但我最初认为这涉及到更多的参与。

我在我的Angular Foundation Popover指令中有几个项目，我想用换行符分开。

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

什么是解决方案添加一个换行符是/ br是在这行html？

Answer 1

这很棘手。如果您正在使用angular-foundation（我真的推荐使用它），你可以修改官方酥料饼的模板是HTML不安全 - 比你可以使用popovers 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不安全弹出框 - 或者你可以使用tooltip，它支持默认的HTML不安全（指令tooltip-html-unsafe）。