Angularjs 如何在角度基础弹出内容中添加断线?
这似乎应该是一个简单的问题,但事实证明它比我最初认为的要复杂得多 我在我的角基金会POPFORD指令中有两个项目,我想用断线分开。Angularjs 如何在角度基础弹出内容中添加断线?,angularjs,zurb-foundation,haml,Angularjs,Zurb Foundation,Haml,这似乎应该是一个简单的问题,但事实证明它比我最初认为的要复杂得多 我在我的角基金会POPFORD指令中有两个项目,我想用断线分开。 .div{ 'popover' => "Name: {{ user.name }} /br Age: {{ user.age }}", 'popover-trigger' => 'click' } 在这一行html中添加换行符的解决方案是什么?这相当棘手。如果您正在使用(并且我真的建议您使用它),您可以将官方的popover模板修改为HTML不安全,而
.div{ 'popover' => "Name: {{ user.name }} /br Age: {{ user.age }}", 'popover-trigger' => 'click' }
在这一行html中添加换行符的解决方案是什么?这相当棘手。如果您正在使用(并且我真的建议您使用它),您可以将官方的popover模板修改为HTML不安全,而不是在popover中使用HTML: JS
“严格使用”;
//应用程序定义-别忘了包括angular foundation模块
角度模块(“应用程序”、[“毫米基础”]);
//只是o控制器,没什么特别的
有棱角的
.模块(“应用程序”)
.控制器(“主控制器”,主控制器);
函数MainController(){
var vm=这个;
vm.name=“约翰·多伊”
vm.email=“约翰。doe@example.com"
}
//不安全过滤器-这在下面的模板中使用
有棱角的
.模块(“应用程序”)
.过滤器(“不安全”,不安全)
功能不安全($sce){
返回函数(val){
返回$sce.trustAsHtml(val);
};
};
//官方popover模板修改
有棱角的
.module(“template/popover/popover.html”,[])
.run([“$templateCache”),函数($templateCache){
$templateCache.put(“模板/popover/popover.html”,
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
"");
}]);
HTML
让我停下来!
你在这里工作
您还可以制定自己的指令来同时使用HTML安全弹出窗口和HTML不安全弹出窗口,或者您可以使用默认情况下支持HTML不安全的Instead(指令
工具提示HTML不安全)。这是相当棘手的。如果您正在使用(并且我真的建议您使用它),您可以将官方的popover模板修改为HTML不安全,而不是在popover中使用HTML:
JS
“严格使用”;
//应用程序定义-别忘了包括angular foundation模块
角度模块(“应用程序”、[“毫米基础”]);
//只是o控制器,没什么特别的
有棱角的
.模块(“应用程序”)
.控制器(“主控制器”,主控制器);
函数MainController(){
var vm=这个;
vm.name=“约翰·多伊”
vm.email=“约翰。doe@example.com"
}
//不安全过滤器-这在下面的模板中使用
有棱角的
.模块(“应用程序”)
.过滤器(“不安全”,不安全)
功能不安全($sce){
返回函数(val){
返回$sce.trustAsHtml(val);
};
};
//官方popover模板修改
有棱角的
.module(“template/popover/popover.html”,[])
.run([“$templateCache”),函数($templateCache){
$templateCache.put(“模板/popover/popover.html”,
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
"");
}]);
HTML
让我停下来!
你在这里工作
您还可以制定自己的指令,使HTML安全弹出窗口和HTML不安全弹出窗口都具有安全性,或者您可以使用Instead,它默认支持HTML不安全(指令工具提示HTML不安全)。有趣!我想这是一个解决办法。唯一的问题是,每次更新angular foundation时,都必须反复执行此操作。我想知道是否有更简单、更持久的解决方案?如果我在几天内没有听到其他消息,我会用你的回答。谢谢@JDC您不必修改库本身,因此无需在每次更新时修改angular foundation。您只需将修改内容放入您自己的文件中,即可覆盖原始模板:-)谢谢。我用了你的密码。具体来说,对于那些将来可能需要该解决方案的人,我在Akarienta的JS文件中使用了“不安全过滤器”和“官方popover模板修改”下的代码块。您只需要将其包含在任何角度文件中。请确保将.module(“app”)“app”更改为您在ng应用程序中使用的任何内容。此外,在MM.Fund加载之后,您要确保您的文件位于您的资产管道中,这样修改代码可以重写原件。我想这是一个解决办法。唯一的问题是,每次更新angular foundation时,都必须反复执行此操作。我想知道是否有更简单、更持久的解决方案?如果我在几天内没有听到其他消息,我会用你的回答。谢谢@JDC您不必修改库本身,因此无需在每次更新时修改angular foundation。您只需将修改内容放入您自己的文件中,即可覆盖原始模板:-)谢谢。我用了你的密码。具体来说,对于那些将来可能需要该解决方案的人,我在Akarienta的JS文件中使用了“不安全过滤器”和“官方popover模板修改”下的代码块。您只需要将其包含在任何角度文件中。请确保将.module(“app”)“app”更改为您在ng应用程序中使用的任何内容。此外,在MM.Fund加载之后,要确保文件位于您的资产管道中,这样修改代码可以重写原始代码。
"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" +
"");
}]);
<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>