Popover未将字符串绑定为html angularjs
Popover not binding string as html angularjs
我有以下代码。
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
Hello, All
<img class="tip" data-placement="bottom" src="http://static.loanstreet.com.my/assets/common/glasses.png" popover="{{my_html}}" popover-trigger="mouseenter">
</div>
</body>
</html>
和js文件
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
$scope.my_html = '1. No Lock-In period <br>2. No withdrawals allowed (Non-Flexi) <br>3. For extra repayment to principal, minimum amount must be RM1000 and above <br>4. Only Non-ZEC option is available5. For completed or BUC property';
});
我想在底部显示popover模板,以及'<br>’在显示时按原样显示。我希望字符串显示为HTML。Attavhed是我的plunkr文件。
http://plnkr.co/edit/1Ei09Mny89EbCUnLWgUX
您需要覆盖popover的默认html模板,并使用$sce服务将html与其绑定。
对不安全的数据使用$sce:-
angular.module('ui.bootstrap.demo').filter('unsafe', ['$sce', function ($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
}]);
覆盖默认popover的模板:-
angular.module("template/popover/popover.html", []).run(["$templateCache", function ($templateCache) {
$templateCache.put("template/popover/popover.html",
"<div class='"popover {{placement}}'" ng-class='"{ in: isOpen(), fade: animation() }'">'n" +
" <div class='"arrow'"></div>'n" +
"'n" +
" <div class='"popover-inner'">'n" +
" <h3 class='"popover-title'" ng-bind-html='"title | unsafe'" ng-show='"title'"></h3>'n" +
" <div class='"popover-content'"ng-bind-html='"content | unsafe'"></div>'n" +
" </div>'n" +
"</div>'n" +
"");
}]);
Plunker
信用
相关文章:
- 将值从html传递到AngularJS控制器
- AngularJS/HTML/Bootstrap元素用于动态搜索结果
- 如何放置'选择'基于angularJS中数据的html选项
- AngularJS指令,在元素后插入HTML
- AngularJS-需要在index.html页面中访问来自服务的数据
- AngularJS加载JSON数据,然后从中解析/加载HTML
- 使用AngularJS Directive WHITOUT$scope创建一个动态html元素
- 显示&作为&在jsp中使用angularjs而不使用ng-bind-html
- 如何根据html内容使用ng类-AngularJS
- 如何在angularjs中实现html格式的字符串
- HTML 标记未在 AngularJS ckEditor 中应用,而是在 Ediator 中显示 HTML 元素标记代码
- 如何在angularJS中运行for循环而不使用html标记
- AngularJS:带有HTML和angular表达式的指令;编译”;具有外部范围的内容
- AngularJS&Google可视化-使用状态更改处理程序(Google API)在HTML页面上查看$sco
- 如何使用html / angularjs保存图像文件
- Popover未将字符串绑定为html angularjs
- HTML Angularjs 中的 if 语句
- AngularJS如何异步遍历Angular模板(HTML+AngularJS指令)
- 在HTML angularjs中显示字符串
- 如何在输入框中保留用户输入?[HTML/AngularJS]