如何在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）。